文本居于图片左侧html,CSS实现图片与文本的居中对齐的常见方式

1.为图片和文本都设置vertical-align：middle

!DOCTYPE html>

Page Title

.d1>* {

vertical-align: middle;

}

这是一段文本

2.通过弹性布局实现，外层容器设置弹性布局，通过align-items: middle设置交叉轴居中对齐

!DOCTYPE html>

Page Title

.d1 {

display: flex;

align-items: center;

}

这是一段文本

3.借助于背景图片实现，这时只需要文本居中即可

!DOCTYPE html>

Page Title

.d1 {

height: 133px;

background: url(./1.jpg) 0 0 no-repeat;

background-size: 100px 133px;

padding-left: 100px;

line-height: 133px;

}

这是一段文本

4.图片与文本左浮动，同时设置容器元素的line-height

!DOCTYPE html>

Page Title

.d1 *{

float: left;

}

.d1 span {

line-height: 133px;

}

这是一段文本

最终效果：

屏幕剪辑的捕获时间: 2018/10/11 23:37

5.文本设置为行内块，图片垂直居中对齐

Page Title

.d1 img {

vertical-align: middle;

}

.d1 span {

display: inline-block;

}

这是一段文本