1.为图片和文本都设置vertical-align:middle
<style>
.d1>* {
vertical-align: middle;
}
</style>
<div class='d1'>
<img src='./1.jpg' width='100'/>
<span>这是一段文本</span>
</div>
2.通过弹性布局实现,外层容器设置弹性布局,通过align-items: middle设置交叉轴居中对齐
<style>
.d1 {
display: flex;
align-items: center;//对齐
justify-content: center;//居中
}
</style>
<div class='d1'>
<img src='./1.jpg' width='100'/>
<span>这是一段文本</span>
</div>
3.借助于背景图片实现,这时只需要文本居中即可
<style>
.d1 {
height: 133px;
background: url(./1.jpg) 0 0 no-repeat;
background-size: 100px 133px;
padding-left: 100px;
line-height: 133px;
}
</style>
<div class='d1'>
<!--<img src='./1.jpg' width='100'/>-->
<span>这是一段文本</span>
</div>
4.图片与文本左浮动,同时设置容器元素的line-height
<style>
.d1 *{
float: left;
}
.d1 span {
line-height: 133px;
}
</style>
<div class='d1'>
<img src='./1.jpg' width='100' height='133'/>
<span>这是一段文本</span>
</div>
5.文本设置为行内块,图片垂直居中对齐
<style>
.d1 img {
vertical-align: middle;
margin-top:-10px;//看情况加不加
}
.d1 span {
display: inline-block;
}
</style>
<div class='d1'>
<img src='./1.jpg' width='100' height='133'/>
<span>这是一段文本</span>
</div>