ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
当被设置元素为 [块状元素](http://www.imooc.com/code/2048 "忘了的小伙伴,让我们点击链接复习一下吧! ") 时用 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 删除,还它是否还可以居中显示。(记得点击右上角的全屏按钮查看效果哦!) ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>定宽块状元素水平居中</title> <style> div{ border:1px solid red; width:200px; margin:20px auto; } </style> </head> <body> <div>我是定宽块状元素,我要水平居中显示。</div> </body> </html> ```