[英]Horizontal align of floating elements within a responsive div
我在這個小提琴中有一個結構類似的元素,但實際上它是響應式的。 因此寬度總是不同的,並且當UL小於默認值時,我很難將LI居中。 這是代碼:[HTML]:
<ul>
<li>Some nice text</li>
<li>Some nice text</li>
<li>Some nice text</li>
<li>Some nice text</li>
<li>Some nice text</li>
<li>Some nice text</li>
<li>Some nice text</li>
<li>Some nice text</li>
</ul>
[CSS]:
ul {
width: 400px; /* <-- try to change it - li won't be centered :(*/
overflow-x: hidden;
overflow-y: auto;
padding: 0 16px;
border: 1px solid black;
}
li {
border-radius: 5px;
box-shadow: 0 0 15px #AAAAAA;
float: left;
height: 150px;
display: inline-block;
list-style: none;
margin: 15px;
padding: 10px;
text-align: center;
width: 100px;
}
明確的問題是:如何使具有響應寬度的塊中的浮動元素水平對齊?
您可以通過將父元素設置為text-align: center;
來將行inline-block
元素水平居中text-align: center;
並向子元素添加vertical-align
(例如,頂部),以避免垂直定位問題。
添加text-align: center;
到ul
並添加vertical-align: top;
到li
並移除float: left;
從li
標簽。
ul {
width: 400px;
overflow-x: hidden;
overflow-y: auto;
padding: 0 16px;
border: 1px solid black;
text-align: center;
}
li {
border-radius: 5px;
box-shadow: 0 0 15px #AAAAAA;
height: 150px;
display: inline-block;
list-style: none;
margin: 15px;
padding: 10px;
text-align: center;
width: 100px;
vertical-align: top;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.