[英]center ul li images in div
I am trying to center ul and li images but it's not happening I tried this but this isn't working for me. 我正在尝试将ul和li图像居中,但是这并没有发生,我尝试过此操作,但这对我没有用。
I want to center the unordered list and it's list item 我想将无序列表及其列表项居中
HTML HTML
<div class="brands">
<ul>
<li><img src="images/flipkart.png"></li>
<li><img src="images/ola.png"></li>
<li><img src="images/olx.png"></li>
<li><img src="images/telenor.png"></li>
<li><img src="images/uc.png"></li>
<li><img src="images/oyo.png"></li>
</ul>
</div>
CSS CSS
.brands {
width: 100%;
min-height: 120px;
background-color: #d7d7d7;
}
.brands ul {
margin-right: 10%;
margin-left: 10%;
}
.brands li {
float: left;
list-style: none;
}
.brands img {
padding: 35px 40px;
}
If you give float: left
, it will never be considered as an inline
element. 如果提供
float: left
,则永远不会将其视为inline
元素。 Use display: inline-block
to make it an inline
element with block
's properties to center it using text-align: center
: 使用
display: inline-block
使其成为具有block
属性的inline
元素,以使用text-align: center
使其text-align: center
:
.brands li {
display: inline-block;
list-style: none;
}
.brands ul {
text-align: center;
margin-right: 10%;
margin-left: 10%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.