[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]圖片、多行文本、多行文本與圖片的水平垂直居中