html - 如何将图像和文本置于 div 下方的中心？

Question

我正在尝试制作一个 4 分割的着陆页，其下方有一个图标和一个文本，每个 div 内水平和垂直居中。我尝试了各种解决方案，但似乎没有一个有效，所以我发布了目前为止的内容。这是一个 jsfiddle http://jsfiddle.net/W8gs3/

HTML:

    <div id="rect1"> 

            <p><img src="icon.png"/></p>
            <p>Sound</p>

    </div>
    <div id="rect2">rect2</div>
    <br />
    <div id="rect3">rect3</div>
    <div id="rect4">rect4</div>
    <br />

CSS:

    /* CSS Document */

    html, body {
    width:   100%;
    height: 100%;
    padding:     0;
    margin: 0;
    }

    div {
    padding:0;
    margin: 0;
    width:50%;
    height:50%;
    float: left;
    }

    #rect1 {
        background: #0066FF;
    }

    #rect2 {
        background-color: #CC0033;
    }
    #rect3 {
        background-color: #669966;
    }
    #rect4 {
        background-color: #FFCC33;
    }
    br {
    clear:   left;
    }

Answer 1

如果您在 html 中添加一个额外的 div:

声音

<div id="rect2" class="outer">
    <div class="inner">rect2</div>
</div>
<div id="rect3" class="outer">
    <div class="inner">rect3</div>
</div>
<div id="rect4" class="outer">
    <div class="inner">rect4</div>
</div>

您可以使用以下样式:

div.outer {
    padding:0;
    margin: 0;
    width:50%;
    height:50%;
    float: left;
    display:table;
}
div.inner {
    display:table-cell;
    width:100%;
    height:100%;
    text-align:center;
    vertical-align:middle;
}

Example