在父div中居中子div [英] Center child divs inside parent div

问题描述

我有一个父div必须保持在100％与3个孩子的div。我需要集中3个孩子的div，但不知道如何。

I have a parent div that must stay at 100% with 3 child divs inside. I need to center the 3 child divs, but don't know how.

.parent
{
    width: 100%;    
    border: 1px solid blue;
}

.child
{
    float: left;    
    border: 1px solid red;
    margin: 2px;
}

<div class="parent">
    <div class="child">child1</div>
    <div class="child">child2 - center us child divs! :)</div>
    <div class="child">child3</div>
    <div style="clear: both"></div>
</div>

以下是一些示例代码：

http://jsfiddle.net/qdHH3/2/

谢谢！

推荐答案

尝试使用 display：inline-block 和 text-align：center

.parent {
    width: 100%;
    border: 1px solid blue;
    text-align: center;
}

.child {
    display: inline-block;  
    border: 1px solid red;
    margin: 2px;
}

jsFiddle： http://jsfiddle.net/qdHH3/3/

jsFiddle: http://jsfiddle.net/qdHH3/3/

这篇关于在父div中居中子div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！