Question

我有这个CSS问题：

<div id="wrap">
    <div id="left">I am div 1</div>
    <div id="right">I am div 2</div>
</div>

我正在尝试使“我是div 1我是div 2”在wrap div中居中。不知道如何解释它。设计只有百分之一，液体设计，我被卡住了。

有什么想法吗？

Answer 1

如果我理解你的问题，这应该有效：

#wrap {
    background: #e7e7e7;
    padding: 40px;
    text-align: center;
    width: 600px;  
}

#left, #right {
     background: #ccc;
     display: inline-block;    
     padding: 20px;   
}

示例：http://jsfiddle.net/jackrugile/jZLW4/

这会将包裹内的两个div块并排放置。

编辑：2015 Flexbox解决方案

Flexbox现在受到更广泛的支持，并且很可能是针对这种情况的更好解决方案。上面的内联块方法有一些怪癖，例如水平间距和垂直对齐问题。这是flexbox解决方案：

#wrap {
    background: #e7e7e7;
    display: flex;
    justify-content: center;
    padding: 40px; 
    width: 600px;  
}

#left, #right {
    background: #ccc;
    padding: 20px;   
}

示例：http://jsfiddle.net/jackrugile/4xf2c46d/

务必检查Can I Use以确认您支持的浏览器支持flexbox。

Answer 2

text-align:center;会以此为中心：

#wrap{
    width:50%;
    border:1px solid #000;
}

#left, #righ{
    text-align:center;
}

http://jsfiddle.net/DbNs6/1/

Answer 3

如果不关闭，此链接可能会让您到达那里。 http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

将两个div放在包装器中间

3 个答案: