我正在玩一個教程，我發現圖標顯示在列表中的某些文本旁邊。（http://praveenfrancis.com/tutorials/create-a-simple-menu-with-css-sprite/）居中的圖標和文本在div

我想要做的就是嘗試使<li>中的圖標和文本居中，以便在菜單變得流暢並調整大小時，文本和圖標保留在元素的中心。

我創建了一個jsfiddle並試圖做到這一點，但我似乎無法讓事情變得非常正確。任何人都可以給我一些指點嗎？

2013-04-20 Chris Robinson

可能不得不使用一些這方面的更多內容... – Kyle 2013-04-20 16:31:29

這裏的解決方案：http://jsfiddle.net/PuZwb/2/。您需要將精靈包含在元素中或像:before這樣的僞選擇器中，然後使用display: inline-block，然後使用vertical-align: middle。

CSS

ul.menu li:before{ 
    content: ''; 
    display: inline-block; 
    width: 64px; 
    height: 64px; 
    margin-right: 10px; 
    vertical-align: middle; 
    background:url("http://chrisandjennyswedding.com/sprite.png") no-repeat; 
} 

ul.menu li#cakes:before {background-position:0 0} 
ul.menu li#donuts:before {background-position:0 -64px} 
ul.menu li#rolls:before {background-position:0 -128px} 
ul.menu li#pies:before {background-position:0 -196px}

來源

2013-04-20 16:34:55

如果您還想要水平對齊，請添加額外的'text-align：center'：http://jsfiddle.net/PuZwb/4/ – 2013-04-20 16:38:21

可以使用選擇器。就是我以後的樣子。謝謝 – 2013-04-20 20:18:15

要做到這一點你的方式，你將不得不寬度增加了<li>。看到這updated fiddle看我的意思。

這也是使用:before僞選擇器的好地方。

來源

2013-04-20 16:35:07 dsundy

非常好的解決方案，只需很少的更改。 – 2013-04-20 20:10:16

換你你UL在一個div像

body> 
<div class="wrapper"> 
    <ul class="menu"> 
     <li id="cakes">cakes</li> 
     <li id="donuts">donuts</li> 
     <li id="rolls">rolls</li> 
     <li id="pies">pies</li> 
    </ul> 
</div>

然後CSS這樣

.menu { 
width: 210px; 
background-color: #09C; 
margin 0 auto; 

} 

.wrapper { 
    width: 100%; 
    background-color: #09C;

這將圍繞您的UL簡單好用的

來源

2013-04-20 16:44:54 jaggysnake

居中的圖標和文本在div

回答

CSS

相關問題