中心对齐多个孩子DIV

我发现有点混乱解决这个问题。中心对齐多个孩子DIV

我有父DIV和3 /多个孩子DIV。

父DIV居中对齐，子DIV应该左移但应该对齐中心。

CSS含有

.center { 
    float:left; 
    height:250px; 
    width:15%; 
    margin: 0 auto; 
    border: 1px solid black; 
}

I have a sample of the code link here...

来源

2012-11-28 Santa_612

如果你想水平对齐你的元素集中，那么不要浮动它们。

更改它们显示到inline-block的方式，通过改变text-align风格其父的对齐它们在中心：

#parent { 
 
    text-align:center; 
 
    height:450px; 
 
    width:75%; 
 
    border:1px solid blue; 
 
} 
 
.center { 
 
    display:inline-block; 
 
    height:250px; 
 
    width:15%; 
 
    margin: 0 auto; 
 
    border: 1px solid black; 
 
}

<div id="parent"> 
 
    <div id="child1" class="center"></div><!-- 
 
--><div id="child2" class="center"></div><!-- 
 
--><div id="child3" class="center"></div> 
 
</div>

确保没有空格或换行符在你的孩子之间<div> s（在你的HTML中），或者注释掉它。现在这些是内联元素，这个空格将被解释为一个空格。

来源

2012-11-28 10:34:36 George

+1用于指出引起PITA的空白。哈哈，可能救了OP，问另一个问题。 – Chris

我也冒昧地编辑出A字并格式化一下。希望这对你很好。 – Chris

谢谢。我曾尝试内联，但内联块工作:-) –

自动利润率将不适用于具有施加一个浮动的元件。删除浮动应该让你开始...

来源

2012-11-28 10:33:35

中心对齐多个孩子DIV

回答

相关问题