图片垂直居中：IE8+支持
方法1
.box {line-height:300px;text-align:center;}.box>img {vertical-align:middle;}
方法2：添加空元素
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>test</title><style>p {border:1px solid red;background:#eee;text-align:center;height:300px;}img {width:200px;height:200px;vertical-align:middle;}i {display:inline-block;height:100%;border:1px solid green;//可选vertical-align:middle;}</style></head><body><p><img src="1t.jpg" /><i></i></p></body></html>
多行文本垂直居中：IE8+支持
方法1：
.box {line-height:300px;}.box>span {display:inline-block;line-height:normal;vertical-align:middle;}
方法2：添加空元素
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>test</title><style>p {border:1px solid red;background:#eee;text-align:center;height:300px;}span {display:inline-block;vertical-align:middle;}i {display:inline-block;height:100%;border:1px solid green;//可选vertical-align:middle;}</style></head><body><p><span>美国神婆星座网测试栏目提供心理测试、星座测试、星座配对测试、<br/>测试题等心里测试大全,了解更多心理测试大全分析就到<br/>美国美国神婆星座网测试栏目提供心理测试、星座测试、星座配对测试、</span><i></i></p></body></html>
多行文本与图片垂直居中：
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>test</title><style>p {border:1px solid red;//可选background:#eee;line-height:300px;}img {width:200px;//可选height:200px;//可选vertical-align:middle;}span {width:250px;//可选line-height:normal;display:inline-block;vertical-align:middle;}</style></head><body><p><span>美国神婆星座网测试栏目提供心理测试、星座测试、星座配对测试、<br/>测试题等心里测试大全,了解更多心理测试大全分析就到美国</span><img src="1t.jpg" /></p></body></html>
时间： 2024-10-13 17:19:45