章节
问答
课签
笔记
评论
占位
占位

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

当被设置元素为 块状元素 时用 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 删除,还它是否还可以居中显示。(记得点击右上角的全屏按钮查看效果哦!)

?不会了怎么办
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最赞回答 / qq_慕沐2052821
这两个的div应该都是块元素。看了你这句话之后我回到了15.1和15.2分别尝试用定宽居中和行内元素水平居中进行处理,结果是两者都可以居中,但效果截然不同,text-align:center;处理的是元素在盒子里的居中,而margin:20px auto;则是使盒子相对于网页的居中,显然15.2说无法应用text-align:center的处理描述是不准确的。至于两者都没有用display:inline来看,这两个的div应该都是块元素。

最赞回答 / 千与千寻l
你对margin:200px auto理解错了margin:200px auto意思是上下外边距为200px,左右边距都为auto,所以就平分居中了margin-left:20px  是可以显示,再加个auto是错误的,相对于给左外边框设置两个值,画蛇添足

已采纳回答 / weixin_慕数据2374107
之前教程里有种缩写方式,上下都为10px。左右都为20px写法如下
div{ margin:10px 20px;}
所以题中的20px为上下,auto设置的作用,我是这样理解的

最赞回答 / 戏佳人
div容器默认大小是占一整行的,这个时候你设置text-align,只是文字先对于div容器的居中。当你将div的宽度设定为固定值,如200px,这时你用text-align去居中,文字会相对于div居中,但并不会相对于浏览器窗口居中,div并没有动。所有,使用margin:auto;让div居中

最赞回答 / qq_CQ_0
auto在怎么想应该也是自动的意思吧..翻译成汽车太僵硬了

最新回答 / 慕瓜0176866
上下居中不就是垂直居中的意思嘛,用垂直居中的方法去实现应该可以

最新回答 / 半生醉
像这样<!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;}.a{ margin:0 auto 20px auto;}.b{    margi...

已采纳回答 / sdarks
它这里不是写成<...code...>这里的意思是:<...code...>上边距20像素,下边距20像素,左右居中。

已采纳回答 / 慕工程6517249
对,magine:20px指的就是上右下左离边框外的距离,就是外边距

最赞回答 / oliviasun1129
意思就是div必须设置个宽度,不设置的话没有办法实现左右居中

最新回答 / 慕工程0123645
定宽块状元素的设置是将margin的左右设为auto。

已采纳回答 / 慕村7033667
左右都需要设置auto

已采纳回答 / 蝉时雨丶0909
<style> 标签用于为 HTML 文档定义样式信息。  在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。  type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。意思是这里面的文本内容(text)要当层叠样式表 (css)来解析,不能当作其它的来解析。  由于唯一值type是"text/css" 所以一般不写也是可以使用的,但是一般的代码规范性是要要求要写的。就看你遵守不遵守代码规范性了,你写不写都是没有影响的。
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言