[英]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.