Datehoer的博客
我本将心向明月,奈何明月照沟渠
Datehoer的博客

当前位置:主页 > 技术分享 > html 文字水平垂直居中

html 文字水平垂直居中

浏览: 作者:Datehoer 发布日期:2020-12-30 20:52:03 来源: 原创
其实大概在许多初学html5的人,都会有一个疑惑,我怎么将文字在div内水平垂直居中呢?
下面讲解一下如何水平垂直居中。
简单看一个具体的效果吧。
html文字水平垂直居中
其实一般来说,我们做到水平居中是很容易的,那么垂直居中呢?
html如何做到文字垂直居中?

首先看一下如何做到水平居中----->我们通过一个简单的css属性来做到,text-align:center;其实说到这个属性,我们就不得不说一下align属性了,这个可以直接在行内写上,类似于class等。不过其实这个属性已经废弃了,我们现在还是推荐使用css属性来达到想要的效果。
html文字水平垂直居中
做到了水平居中的效果,然后我们再来看一下垂直居中。这个其实是利用div的height来做到,我们首先给div定义一个height,比如说我上面的案例给的是60px,然后我们给它一个关于height的属性--line-height属性,我们给div的高度是多少,那么给line-height的高度就是多少,我们给它加上一个line-height:60px:然后就得到了上面的效果了。
其实居中这个效果很容易做到,比如说我们还可以利用margin:0 auto;来做到,当然只是该属性的居中,比如说给div居中。
简单看一下这个html文字水平垂直居中的代码吧。

.footer {
line-height: 60px;
text-align: center;
clear: both;
height: 60px;
background-color: #6cf;
}


<footer class="footer">
<p>网站设计案例 2020年12月</p>
</footer>
其实还是非常简单的,利用行内高度来做到,line-height。
如果有什么疑问,可以在评论区留言,我会在看到的第一时间进行回复的。


 


版权:本文由Datehoer原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请保留以上作者信息和原文链接本文链接:https://zjzdmc.top/jsfx/105.html。

文章推荐

热门标签

返回顶部
下面为相关推荐
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!