CSS实现图片与文本的居中对齐的常见方式
尚衍亮 2019-06-30
1.为图片和文本都设置vertical-align：middle
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<style>
.d1>* {
vertical-align: middle;
}
</style></head>
<body>
<div class='d1'>
<img src='./1.jpg' width='100'/>
<span>这是一段文本</span>
</div></body>
</html>
2.通过弹性布局实现，外层容器设置弹性布局，通过align-items: middle设置交叉轴居中对齐
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<style>
.d1 {
display: flex;
align-items: center;
}
</style></head>
<body>
<div class='d1'>
<img src='./1.jpg' width='100'/>
<span>这是一段文本</span>
</div></body>
</html>
3.借助于背景图片实现，这时只需要文本居中即可
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<style>
.d1 {
height: 133px;
background: url(./1.jpg) 0 0 no-repeat;
background-size: 100px 133px;
padding-left: 100px;
line-height: 133px;
}
</style></head>
<body>
<div class='d1'>
<!--<img src='./1.jpg' width='100'/>-->
<span>这是一段文本</span>
</div></body>
</html>
4.图片与文本左浮动，同时设置容器元素的line-height
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<style>
.d1 *{
float: left;
}
.d1 span {
line-height: 133px;
}
</style></head>
<body>
<div class='d1'>
<img src='./1.jpg' width='100' height='133'/>
<span>这是一段文本</span>
</div></body>
</html>
最终效果：
屏幕剪辑的捕获时间: 2018/10/11 23:37
5.文本设置为行内块，图片垂直居中对齐
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<style>
.d1 img {
vertical-align: middle;
}
.d1 span {
display: inline-block;
}
</style></head>
<body>
<div class='d1'>
<img src='./1.jpg' width='100' height='133'/>
<span>这是一段文本</span>
</div></body>
</html>
相关推荐
opspider 0喜欢 / 0评论 2020-06-28
ZHANGRENXIANG00 0喜欢 / 0评论 2020-06-28
明瞳 0喜欢 / 0评论 2020-06-10
lanzhusiyu 0喜欢 / 0评论 2020-06-09
HSdiana 0喜欢 / 0评论 2020-06-03
PengQ 0喜欢 / 0评论 2020-05-26
lengyu0 0喜欢 / 0评论 2020-05-20
HSdiana 0喜欢 / 0评论 2020-05-11
haidaoxianzi 0喜欢 / 0评论 2020-04-18
PioneerFan 0喜欢 / 0评论 2020-04-09
HSdiana 0喜欢 / 0评论 2020-03-28
百年da孤独 0喜欢 / 0评论 2020-03-27
lwb 0喜欢 / 0评论 2020-03-26
haocxy 0喜欢 / 0评论 2020-03-08
spinachcqb 0喜欢 / 0评论 2020-03-06
柳永法的个人 0喜欢 / 0评论 2020-02-13
qsdnet我想学编程 0喜欢 / 0评论 2020-01-29
wwwxuewen 0喜欢 / 0评论 2020-01-19
爱好HtmlCssJs 0喜欢 / 0评论 2019-12-26
行吟阁 0喜欢 / 0评论 2019-12-14
yanweiqi 0喜欢 / 0评论 2019-12-12
zuihaobushi 0喜欢 / 0评论 2019-12-04
左转有出口 0喜欢 / 0评论 2019-12-02
somboy 0喜欢 / 0评论 2019-12-01
WebVincent 0喜欢 / 0评论 2019-11-19
DAV数据库 0喜欢 / 0评论 2019-11-11
yzxlemon 0喜欢 / 0评论 2014-06-25
csdnuuu 0喜欢 / 0评论 2019-11-05
书虫媛 0喜欢 / 0评论 2019-10-29
shawroad 0喜欢 / 0评论 2019-10-27
爱好HtmlCssJs 0喜欢 / 0评论 2019-10-25
爱好HtmlCssJs 0喜欢 / 0评论 2019-10-22
revivre 0喜欢 / 0评论 2015-01-24
whosemario 0喜欢 / 0评论 2015-02-12
scdn 0喜欢 / 0评论 2015-06-12
jadechen00 0喜欢 / 0评论 2015-05-18
galilajiao00 0喜欢 / 0评论 2015-06-03
bossbusy 0喜欢 / 0评论 2015-05-29
wangnan0 0喜欢 / 0评论 2015-07-17
中等偏下 0喜欢 / 0评论 2015-07-17
UC浏览器搜索引擎 0喜欢 / 0评论 2015-08-27
gufudhn 0喜欢 / 0评论 2015-10-28
starleejay 0喜欢 / 0评论 2015-10-26
MrWhite0 0喜欢 / 0评论 2016-05-03
SinhaengHhjian 0喜欢 / 0评论 2016-11-19
yongyonglsy 0喜欢 / 0评论 2017-02-23