代码之家 › 专栏 › 技术社区 › user7055375

除了“文本对齐:居中把东西放在一个DIV里?

alignment css html

user7055375 · 技术社区 · 7 年前

我想水平对齐“loginArea”分区中的所有内容

<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;
}

但我的“文本对齐:居中或“对齐项目:居中有任何影响-- https://jsfiddle.net/980obtcz/ . 如何水平对齐项目?

3 回复 | 直到 7 年前

tmdesigned 7 年前

文本对齐:居中处理“内联”或“内联块”元素。这意味着文本、图像、链接等不需要占用尽可能多的宽度,只需要它们需要的宽度。它们的“display”属性设置为inline,可以像文本一样居中--因此命名为text align。

如果您想将一个非内联元素居中,通常是“块”,那么现在您讨论的是那些自然需要尽可能多宽度的元素。所以把它们放在中心并不重要,因为它们填满了整个东西。在这种情况下,您可以通过将其左右边距设置为“自动”并指定宽度,或者在父级(如flex)上使用不同的显示模式来实现。

看起来您正在实现第二个选项。在父元素上,确实有display flex。但flex就像一匹必须驯服的野马。需要一些时间才能习惯。例如,它不太关心文本对齐:居中。

让父元素灵活(没有任何其他规范)基本上就是说,“嘿,父元素,让所有子元素都排成一行。”在你的情况下,你有两个孩子,都是div的,所以他们会并排走。

Flex有一个主轴(默认情况下为水平轴),要使项目在该轴内居中,可以使用“对齐内容:中心”。将其添加到#loginArea的CSS中会将所有子级放在一行中,但居中。

那可能是你想要的。相反,如果您希望loginInstructions div位于自己的行上,您还可以添加:flex wrap:wrap;对于父级,允许它创建额外的行,并且flex-basis:100%用于loginInstructions,告诉它占flex行的100%。

Scath Adam Robinson 7 年前

如果你改变 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>

Pavel Kukla 7 年前

使用“对齐内容:中心”;

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