垂直對齊裏面的列表項

我一直在試圖讓這個釘了很久，但似乎無法弄清楚。我只需要在每個<ul>的中心水平和垂直對齊文本，但它不會發生。 JSFiddle 垂直對齊裏面的列表項

我哪裏錯了？

#HomeRight { 
 
    position: absolute; 
 
    width: 120px; 
 
    top: 120px; 
 
    bottom: 100px; 
 
    right: 0; 
 
} 
 

 
#HomeRight ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; \t 
 
    display: table; 
 
} 
 

 
#HomeRight li { 
 
    display:table-cell; 
 
    float:left; 
 
    width:120px; 
 
    height:25%; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    border: 1px solid transparent; 
 
    background-clip: padding-box; 
 
}

<div id="HomeRight"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    </ul> 
 
</div>

來源

2016-03-08 Jeff Simons

這是你在找什麼https://jsfiddle.net/ds827wnd/1/？ –

請注意，如果你寫'float'，你的'display'屬性將被轉換爲'display：block'，所以你的'display：table-cell'不能正常工作 –

嘗試使用此代碼，它可以幫助你。

#HomeRight { 
 
    position: absolute; 
 
    width: 120px; 
 
    top: 120px; 
 
    bottom: 100px; 
 
    right: 0; 
 
} 
 

 
#HomeRight ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; \t 
 
    display: table; 
 
} 
 

 
#HomeRight li { 
 
    display:table-cell; 
 
    float:left; 
 
    width:120px; 
 
    height:25%; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    border: 1px solid transparent; 
 
    background-clip: padding-box; 
 
    display: flex; 
 
}

<div id="HomeRight"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    </ul> 
 
</div>

來源

2016-03-08 12:38:37

正是我想要的。謝謝。 –

你總是歡迎:) –

也許彈性會比表更好的解決方案

#HomeRight ul { 
width:100%; 
height: 100%; 
display: flex; 
align-items:center; 
justify-content:center; 
}

jsfiddle example

來源

2016-03-08 12:37:15 Michal

#HomeRight { 
 
position: absolute; 
 
    width: 120px; 
 
top: 120px; 
 
right: 0; 
 
} 
 
#HomeRight ul { 
 
margin: 0; 
 
padding: 0; 
 
height: 100%; 
 
} 
 
#HomeRight li { 
 
    list-style: none; 
 
width:120px; 
 
height:25%; 
 
text-align:center; 
 
background-color: rgba(0, 0, 0, 0.4); 
 
border: 1px solid transparent; 
 
background-clip: padding-box; 
 
} 
 
#HomeRight li:before { 
 
content: ''; 
 
display: inline-block; 
 
width: 1px; 
 
vertical-align: middle; 
 
height: 100%; 
 
}

<div id="HomeRight"> 
 
<ul> 
 
<li>1</li> 
 
    <li>2</li> 
 
<li>3</li> 
 
<li>4</li> 
 
</ul> 
 
</div>

https://jsfiddle.net/afelixj/ds827wnd/3/

來源

2016-03-08 12:51:28

垂直對齊裏面的列表項

回答

相關問題