网页css自适应高度下垂直居中文字

html5 专栏收录该内容
3 篇文章 0 订阅

网页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-

  • 3
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值