您的位置：首页 > Web前端 > CSS

垂直居中一张图片和多行文字在固定的盒子内

2017-03-17 14:49 363 查看

HTML代码

<div class="middle-box">
<img src="web.png"/>
<i class="visible"></i>
</div>

CSS代码

.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }
.middle-box img{vertical-align: middle; }
.visible{height: 100%; vertical-align: middle; width: 0; display: inline-block;

转载自这里

本文综述

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。

关于图片垂直居中显示，本人查阅多个网站，觉得这个方法最直接，简洁。

单行文字

可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如：

//单行文字居中显示测试，css样式为：
height:3em; line-height:3em;……

多行文字

在线演示

<!DOCTYPE html>
<html>
<head>
<title>多行文字垂直居中的效果</title>
<style type="text/css">
.container{
height:400px;
display:table;
}
.container .span{
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div class="container">
<span class="span">第一行<br>
第二行<br>
第三行<br>
第二行<br>
</span>
</div>
</body>
</html>

垂直居中一张照片

在线演示

<!DOCTYPE html>
<html>
<head>
<title>大小不固定图片垂直居中</title>
<style type="text/css">
.container{
display:inline-block;
width:1.2em;
font-size:128px;
text-align:center;
vertical-align:middle;
}
.container a img{
vertical-align:middle;
padding:2px;
border:1px solid #beceeb;
}
</style>
</head>
<body>
<div class="container">
<a href="###">
&
adf9
lt;img src="./images/maps.png">
</a>
<a href="###">
<img src="./images/launcher.png">
</a>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html css

相关文章推荐

新的分享

章节导航