Div margin:auto vs align:center [英] Div margin: auto vs align: center
问题描述
我彼此之间有两个div。我希望他们两个都水平居中。问题是我必须使用 align:center
获取 #wrapper
和保证金:另一个是自动
。否则只有其中一个居中。如果我两者都使用 align-center
,那么只有#wrapper居中,如果我使用 margin:auto
,只有第二个居中。
I have 2 divs below each other. I want them both to be centered horizontally. The thing is that I have to use align: center
for the #wrapper
and margin: auto
for the other. Otherwise only 1 of them is centered. If I use align-center
for both, only the #wrapper is centered, if I use margin: auto
for both, only the second one is centered.
为什么我必须使用2个不同的属性将它们对齐在中心?:
Why I have to use 2 different properties to align them in the center?:
HTML:
<div class="col-sm-5 col-sm-offset-3" id="wrapper">
<div class="row">
<div class="col-sm-1 col-sm-offset-2" id="col1"> col1 </div>
<div class="col-sm-1 col-sm-offset-2 " id="col2"> col2 </div>
<div class="col-sm-1 col-sm-offset-2" id="col3"> col3 </div>
</div>
</div>
<div id="below">
Centered div below the #wrapper div
</div>
CSS:
html, body{
height:100%;
}
#col1{
background-color: lime;
border: solid 1px;
text-align: center;
}
#col2{
background-color: aqua;
border: solid 1px;
text-align: center;
}
#col3{
background-color: lightpink;
border: solid 1px;
text-align: center;
}
#wrapper{
border: solid 1px;
height: 10%;
width: 50%;
align: center;
}
#below{
border: solid 2px;
text-align: center;
min-height: 100%;
width: 80%;
clear: both;
margin: auto;
}
推荐答案
align
不是有效的CSS属性 - 它是< table>
元素中可用的属性,但不鼓励使用它: https://developer.mozilla.org/en/docs/Web / HTML /元素/表#属性
align
isn't a valid CSS property - it is an attribute available on the <table>
element, but one that is discouraged from use: https://developer.mozilla.org/en/docs/Web/HTML/Element/table#Attributes
在CSS中使用 align
应该没有效果。
Using align
in your CSS should have no effect.
margin:0 auto;
直接影响容器,当容器是块级别时( display:block
)。
margin: 0 auto;
affects the container directly, and when the container is block-level (display: block
).
text-align :center
影响容器的text,inline和inline-block level children - 而不是容器本身。
text-align: center
affects text, inline, and inline-block level children of a container - not the container itself.
区分两者非常重要:
以块级元素为中心:使用 margin :0自动;
centering a block-level element: use margin: 0 auto;
居中text,inline或inline-block level children:use text-align:center;
centering text, inline, or inline-block level children: use text-align: center;
鉴于此,检查 #wrapper
是否为块级,即 display:block
。如果它不是,或者它有一个禁止其宽度的父级,那么它将不会以边距为中心,除非你进入 display:flex
world,你在掌握块和内联块级元素的基础知识之前,不应该真正探索。
In light of that, check that #wrapper
is block-level i.e. display: block
. If it isn't, or it has a parent that inhibits its width, then it won't center with margin, unless you go into the display: flex
world, which you shouldn't really explore until you grasp the fundamentals of block and inline-block level elements.
我写了一篇文章解释如何利用基本的显示属性,补充使用交互式Codepen演示: http://fixate.it/blog/css-display-properties/
I've written an article explaining how to leverage the basic display properties, supplemented with interactive Codepen demos: http://fixate.it/blog/css-display-properties/
这篇关于Div margin:auto vs align:center的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!