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:375.文本设置为行内块，图片垂直居中对齐<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>