html - 如何将 "nested div"结构居中？

Question

对不起，我找不到更好的名字。我有一个菜单项，在 LI 中:

<li level="1"><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg?w=630&h=420" ><div class="menuText">Home</div></div></div></a></li>

li
{
    width: 50%;
}
a
{
    background-color: green;
    display: block;
    width: 100%;
    text-align: center;    
}

.menuIcons
{
    display: table-cell;
    vertical-align: middle;
    height: 38px;
}
.menuIcons img
{
    max-width: 25px;
    max-height: 25px;
    width: 100%;
}
.menuWrapper { display:table; }

http://jsfiddle.net/fyDWN/

我想将内容居中对齐，但是正如你所见，它的嵌套div结构，设置“text-align: center;”并不那么容易

Answer 1

请将CSS更改为

li
{
    width: 50%;
}
a
{
    background-color: green;
    display: block;
    width: 100%;
    text-align: center; 
    float:left;
}

.menuIcons img
{
    max-width: 25px;
    max-height: 25px;
    width: 100%;
}

检查 http://jsfiddle.net/fyDWN/3/