如何居中「嵌套div」結構？

對不起，我找不到更好的名字。我有一個菜單項，在李：如何居中「嵌套div」結構？

<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嵌套結構，它不是那麼容易設置「文本 - 居中對齊;」

來源

2014-01-25 John Smith

中心的一個標籤，你要這樣嗎？ http://jsfiddle.net/fyDWN/2/ – Karuppiah

是是是是是 –

請更改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/

來源

2014-01-25 11:39:29 Lab

下面將對齊貴麗中心，然後將所有內

<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>

來源

2014-01-25 11:41:09 Dobsc89

如何居中「嵌套div」結構？

回答

相關問題