![](https://csdnimg.cn/release/download_crawler_static/87170913/bg1.jpg)
我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示
的。
这里我们又得分两种情况:行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块
状元素。今天我们先来了解一下行内元素怎么进行水平居中?
如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实
现的。(父元素和子元素:如下面的 html 代码中,div 是“我想要在父容器中水平居中显示”这个文本的
父元素。反之这个文本是 div 的子元素 )如下代码:
html 代码:
.txtCenter{
text-align:center;
}
当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元
素和不定宽块状元素。
这一小节我们先来讲一讲定宽块状元素。(定宽块状元素:块状元素的宽度 width 为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右 margin”值为“auto”来实现居中的。我们来看
个例子就是设置 div 这个块状元素水平居中:
<div>我是定宽块状元素,哈哈,我要水平居中显示。</div>