15-1水平居中设置-行内元素 · 初识HTML+CSS

我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。这里我们又得分两种情况：[行内元素](http://www.imooc.com/code/2049 "忘了的小伙伴，让我们点击链接复习一下吧!") 还是 [块状元素](http://www.imooc.com/code/2048 "忘了的小伙伴，让我们点击链接复习一下吧!") ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？如果被设置元素为文本、图片等行内元素时，水平居中是通过给**父元素**设置 `text-align:center` 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码： html代码： ~~~ <body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body> ~~~ css代码： ~~~ <style> .txtCenter{ text-align:center; } </style> ~~~ ### 任务我来试试：把右侧的图片设置为水平居中显示。（记得点击右上角的全屏按钮查看效果哦！）备注:这一小节没有正确性验证，请查看结果窗口，从而判断输入代码是否正确。 ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>定宽块状元素水平居中</title> <style> div{ border:1px solid red; margin:20px; } .txtCenter{ text-align:center; } </style> </head> <body> <div class="txtCenter">我想要在父容器中水平居中显示。</div>  <div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div> </body> </html> ```