慕课网

水平居中设置-行内元素

我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。

这里我们又得分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：

html代码：

<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

css代码：

<style>
  .txtCenter{
    text-align:center;
  }
</style>

我来试试：把右侧的图片设置为水平居中显示。（记得点击右上角的全屏按钮查看效果哦！）

备注:这一小节没有正确性验证，请查看结果窗口，从而判断输入代码是否正确。

?不会了怎么办

参考代码：

div.imgCenter{
    text-align:center;
}

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求