版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/mylovewanzi/article/details/81346782
网页css自适应高度下垂直居中文字
1、关于css自适应高度(不知道具体的高度)下垂直居中文字:
分析:使用vertical-align方法可以使元素垂直居中,但是只是针对支持vertical的元素,如table 、td 等块级元素(只要是会计元素就行),div和span是不支持的,但我们可以同过display将这些不是块级元素的设置成块级元素。
display: inline-block;
2、实现方法:
我们知道块级元素可以使用vertical-align: middle
来垂直居中,那在自适应下我们是否可以通过该方法来实现文字的垂直居中呢,答案是否定的。
要想达到居中的效果还需要span标签的小小帮助。
下面例子:
(html部分代码)
<!--网站导航-->
<div id="nav">
<ul>
<li><a href="">首页</a><span></span></li>
<li><a href="">热门</a><span></span></li>
<li><a href="">最新</a<span></span></li>
<li><a href="">关于作者</a><span></span></li>
</ul>
</div>
(css部分代码)
/*导航栏样式*/
#nav{
width: 100%;
height: 5%;
background-color: blue;
}
#nav ul li{
margin-left: 15%;
display: inline;
}
#nav ul li a{
display: inline-block;
color: red;
background-color: black;
width: 10%;
height: 5%;
}
#nav ul li span {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
运行结果表明,使用空的sapn标签可以达到a标签的垂直居中。这种方法同样适用于img标签p标签等。
(注意:需要居中的元素本身也要设置垂直居中display: inline-block;
)
3.另一种方法:
父容器:display:table
子容器:display:table-cell
。
再使用vertical-align: middle;
将自容器垂直居中。
这种方法同样可以使得文字垂直居中,缺点是灵活性低,个人觉得没有第一种方法好。而且在上面例子也达到不了垂直居中效果。所以还是推荐第一种方法。
-END-