15-1 水平居中设置-行内元素
本节编程练习不计算学习进度,请电脑登录imooc.com操作

水平居中设置-行内元素

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

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

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

html代码:

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

css代码:

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

 

任务

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

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

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>定宽块状元素水平居中</title>
  6. <style>
  7. div{
  8. border:1px solid red;
  9. margin:20px;
  10. }
  11. .txtCenter{
  12. text-align:center;
  13. }
  14.  
  15. </style>
  16. </head>
  17.  
  18. <body>
  19. <div class="txtCenter">我想要在父容器中水平居中显示。</div>
  20.  
  21. <!--下面是任务部分-->
  22.  
  23. <div class="imgCenter"><img src="http://img1.sycdn.imooc.com//52da54ed0001ecfa04120172.jpg" /></div>
  24. </body>
  25. </html>
下一节