将两个div放在包装中间 [英] Center two divs in the middle of a wrapper

问题描述

我有这个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 center在wrap div中。不知道怎么解释。

I am trying to make "I am div 1 I am div 2" center inside the wrap div. Not sure how to explain it. The design is only in percent, liquid design and I'm stuck.

任何想法？

推荐答案

如果我正确理解你的问题，这应该工作：

If I understand your question correctly, this should work:

#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块放在包装内，并排。

This will center two div blocks within the wrap, side by side.

编辑：2015 Flexbox解决方案

Flexbox现在得到了更广泛的支持，很可能是一种更好的解决方案。有一些奇怪的与上述内联块方法，如水平间距和垂直对齐问题。这里是flexbox解决方案：

Flexbox is much more widely supported now and is most likely a better solution for this situation. There are some quirks that come along with the above inline-block method, such as horizontal spacing and vertical alignment issues. Here is the flexbox solution:

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

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

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

请务必检查我可以使用来确认您支持的浏览器支持flexbox。

Be sure to check Can I Use to confirm that flexbox is supported in the browsers you are supporting.

这篇关于将两个div放在包装中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！