这是在使用Zurb Foundation的XY网格时发生的,但实际上是一个普通的CSS Flex问题。考虑以下代码:
<div style="display:flex;flex-direction:column;height:100vh">
<div style="flex: 1;background-color:yellow">
</div>
<div style="
background-color:blue;
color:white;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
margin: 0 auto;
">
Why does this not span 100% width<br/>like any block elem would?
</div>
</div>
(Fiddle)
为什么下div在其X轴上仅占用其内容所需的宽度,而不是像任何块元素通常那样占用整个宽度;而我应该怎么做才能做到这一点(比将其宽度设置为100%更好?)
答案 0 :(得分:3)
设置margin 0 auto
时,您使用的是简写形式的属性:
margin-top: 0
margin-right: auto
margin-bottom: 0
margin-left: auto
在flexbox中,auto
边距沿其定义的方向占用了所有空间。因此margin-left: auto
和margin-right: auto
将消耗弹性项目两侧的所有可用空间,从而使项目居中。
如果您只想使文本居中,则不要在弹性项目上使用auto
边距,而是将实际文本居中:
代替此:
div { margin: 0 auto; }
尝试一下:
div { display: flex; justify-content: center; text-align: center; }
body {
margin: 0;
padding: 0;
}
<div style="display:flex;flex-direction:column;height:100vh">
<div style="flex: 1;background-color:yellow">
</div>
<div style="
background-color:blue;
color:white;
padding-right: 0.9375rem;
padding-left: 0.9375rem;
/* margin: 0 auto; */
display: flex;
justify-content: center;
text-align: center;
">
Why does this not span 100% width<br/>like any block elem would?
</div>
</div>
更多详细信息: