[CSS]圖片、多行文本、多行文本與圖片的水平垂直居中
阿新 • • 發佈：2017-05-05
支持 clas ont body style back rgb 添加 vertica 圖片垂直居中：IE8+支持方法1
方法2：添加空元素
多行文本垂直居中：IE8+支持方法1：
方法2：添加空元素
多行文本與圖片垂直居中：
.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>
[CSS]圖片、多行文本、多行文本與圖片的水平垂直居中