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结构，并不容易设置＆＃34; text-align：center;＆＃34;

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/

Answer 2

以下内容将对齐您的li中心，然后将所有标记对齐

<li level="1"><a href="/"><div class="menuIcons"><div class="menuWrapper"><img src="....." ><div class="menuText">Home</div></div></div></a></li>

<style>
li
{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    list-style: none;
}
a
{
    background-color: green;
    display: inline-block;
    width: auto;
    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; }
</style>

如何集中“嵌套div”结构？

2 个答案: