首页 > 代码库 > [CSS]图片、多行文本、多行文本与图片的水平垂直居中
[CSS]图片、多行文本、多行文本与图片的水平垂直居中
图片垂直居中: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>
[CSS]图片、多行文本、多行文本与图片的水平垂直居中
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。