15-2 水平居中设置-定宽块状元素
本节编程练习不计算学习进度，请电脑登录imooc.com操作

水平居中设置-定宽块状元素

当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

html代码：

<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}

</style>

也可以写成：

margin-left:auto;
margin-right:auto;

注意：元素的“上下 margin” 是可以随意设置的。

 

任务

我来试试看:这种水平居中的方法两个2个条件缺一不可，不信？你可以尝试把右侧例子中的 width:200px 删除，还它是否还可以居中显示。（记得点击右上角的全屏按钮查看效果哦！）

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>定宽块状元素水平居中</title>
  6. <style>
  7. div{
  8.     border:1px solid red;
  9.  
  10. 	width:200px;
  11. 	margin:20px auto;
  12. }
  13.  
  14. </style>
  15. </head>
  16.  
  17. <body>
  18. <div>我是定宽块状元素，我要水平居中显示。</div>
  19. </body>
  20. </html>
下一节