其实大概在许多初学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。
如果有什么疑问,可以在评论区留言,我会在看到的第一时间进行回复的。

最后修改:2021 年 04 月 19 日 07 : 46 PM
如果觉得我的文章对你有用,请随意赞赏