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屋！