2016-03-08 69 views
0

我一直在試圖讓這個釘了很久,但似乎無法弄清楚。我只需要在每個<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>

+0

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

+0

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

回答

0

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

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

+0

正是我想要的。謝謝。 –

+0

你總是歡迎:) –

0

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

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

jsfiddle example

0

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