Question

我想在“loginArea”DIV

中水平对齐中心的所有内容

<div id="contentArea">

<div id="loginArea">
    <div id="loginInstructions">Login to vote</div>
    <div id="loginImages">
        <a href="/auth/google"><img height="50" border="0" alt="Google" title="Google" class="loginImg" src="/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg"></a>
        <a href="/auth/facebook"><img height="50" border="0" alt="Facebook" title="Facebook" class="loginImg" src="/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png"></a>
        <a href="/auth/twitter"><img height="50" border="0" alt="Twitter" title="Twitter" class="loginImg" src="/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png"></a>
        <a href="/auth/linkedin"><img height="50" border="0" alt="LinkedIn" title="LinkedIn" class="loginImg" src="/assets/linkedin-1d4c0d36adcec44fd86c11c47834e51e3f3226b623f91a2f215993633956e431.png"></a>
        <a title="MySpace" href='javascript:alert("Loser")'> 
                  <div id="mySpaceLogo"></div>
</a>    </div>
</div>

所以我指定了这些样式

#contentArea {
  width: 100%; 
  background-color: blue;
}

#loginArea {
        display: flex;
        vertical-align: middle;
        align-items: center;
        text-align:center;
        width: 100%;
        background-color: red;
}

#loginInstructions {
        display: auto;
}

#loginImages {
        display: auto;
}

但是我的“text-align：center;”或“对齐项目：中心;”有任何影响 - https://jsfiddle.net/980obtcz/。如何水平对齐我的项目？

Answer 1

Text-align：center适用于＆＃34; inline＆＃34;或＆＃34;内联块＆＃34;。这意味着文字，图片，链接等不会要求尽可能多地占用宽度，只需要他们需要的宽度。他们的＆＃34;显示＆＃34;属性设置为内联，它们可以像文本一样居中 - 因此名称为text-align。

如果你想将非内联元素居中，通常会阻止＆＃39;阻止＆＃39;现在你正在谈论那些自然需要尽可能多的宽度的元素。所以集中他们并不意味着什么，因为他们填补了整个事物。在这种情况下，您可以通过将其左右边距设置为＆＃39; auto＆＃39;并指定宽度，或在父类上使用不同的显示模式，如flex。

看起来你是实现第二种选择的一部分。在您的父元素上，您有显示flex。但是flex就像一只必须被驯服的野生种马。这需要一些时间来适应。例如，它并不关心text-align：center。

让你的父元素flex（没有任何其他规范）基本上是说，＆＃34;嘿父元素，连续适合你所有的孩子。＆＃34;在你的情况下，你有两个孩子，两个都是div，所以他们会并排。

Flex有一个主轴（默认为水平），并且在该轴中居中，您使用了justify-content：center。将其添加到#loginArea的CSS中会将所有子项放在一行中，但会居中。

这可能就是你想要的。如果您希望loginInstructions div在其自己的行上，您还可以添加：flex-wrap：wrap;到父级，允许它创建额外的行，并且flex-basis：100％到loginInstructions，告诉它占用灵活行的100％。

Answer 2

如果您将display: flex;更改为display:inline-block; text-align:center;，则会将您的元素置于中心位置。

#contentArea {
  width: 100%; 
  background-color: blue;
}

#loginArea {
        display: inline-block;
        text-align:center;
        width: 100%;
        background-color: red;
}

<div id="contentArea">

<div id="loginArea">
    <div id="loginInstructions">Login to vote   
        <a href="/auth/google"><img height="50" border="0" alt="Google" title="Google" class="loginImg" src="/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg"></a>
        <a href="/auth/facebook"><img height="50" border="0" alt="Facebook" title="Facebook" class="loginImg" src="/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png"></a>
        <a href="/auth/twitter"><img height="50" border="0" alt="Twitter" title="Twitter" class="loginImg" src="/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png"></a>
        <a href="/auth/linkedin"><img height="50" border="0" alt="LinkedIn" title="LinkedIn" class="loginImg" src="/assets/linkedin-1d4c0d36adcec44fd86c11c47834e51e3f3226b623f91a2f215993633956e431.png"></a>
        <a title="MySpace" href='javascript:alert("Loser")'> 
                  <div id="mySpaceLogo"></div></a>    
       </div>
</div>

Answer 3

使用justify-content：center;

#loginArea {
    ...
    justify-content: center;
    ...
}

除了“text-align：center”之外还有其他选项吗？在DIV中居中物品？

3 个答案: