[英]how to bring ul element to the center of the div? CSS
I have a div in which i need the inner list in the center of that div. 我有一个div,我需要该div中心的内部列表。 I can put that in the middle by specifying the width and doing margin 0 auto, but i need to make it dynamic such that even if i remove 1 element from the list, it would appear in the center of the div. 我可以通过指定宽度并自动执行margin 0来将其放在中间,但是我需要使它动态化,即使我从列表中删除1个元素,它也将出现在div的中心。 Or if i add another element it would maintain the center align property. 或者,如果我添加另一个元素,它将保持居中对齐属性。 How do i do that? 我怎么做?
Fiddle: https://jsfiddle.net/ucxdfmpc/1/ 小提琴: https : //jsfiddle.net/ucxdfmpc/1/
<div class="counter-wrapper">
<div class="counter-inner clrfix">
<ul>
<li>
<span class="counter-image first"></span>
<span class="counter-number">4</span>
<span class="counter-text">CREATIVES</span>
</li>
<li>
<span class="counter-image second"></span>
<span class="counter-number">6</span>
<span class="counter-text">CODERS</span>
</li>
<li>
<span class="counter-image third"></span>
<span class="counter-number">4</span>
<span class="counter-text">DESIGNERS</span>
</li>
<li>
<span class="counter-image fourth"></span>
<span class="counter-number">2</span>
<span class="counter-text">WORKERS</span>
</li>
</ul>
</div>
* {
padding: 0px;
margin: 0px;
}
.counter-wrapper {
background: #fe6261;
padding-top: 37px;
padding-bottom: 36px;
border-top: 1px solid #fe4e4d;
border-bottom: 1px solid #fe4e4d;
}
.counter-inner ul{
list-style: none;
}
.counter-inner ul li {
float: left;
width: 14.84375%; /*190px;*/
}
.counter-image {
display: block;
width: 66px;
height: 70px;
border-right: 2px solid #fc6867;
float: left;
}
.counter-image.first {
background: url('../images/counter-1.png') 10px 15px no-repeat;
}
.counter-image.second {
background: url('../images/counter-2.png') 10px 15px no-repeat;
}
.counter-image.third {
background: url('../images/counter-3.png') 10px 15px no-repeat;
}
.counter-image.fourth {
background: url('../images/counter-4.png') 10px 15px no-repeat;
}
.counter-number {
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #fd7e7e;
float: left;
padding: 12px 18px 0px;
}
.counter-text {
float: left;
font-size: 10px;
color: #fd7e7e;
padding: 4px 18px 0;
}
The thing is, you're using floats, which will not clear themselves, and therefore the ul
element will not get the correct dimensions dynamically based on the content. 问题是,您使用的是浮点数,它们不会清除自身,因此ul
元素将不会根据内容动态获取正确的尺寸。 So it's a bit hard centering it. 因此,将它居中有点困难。
Make those list elements display: inline-block
and add text-align: center
to the wrapper, is this what you are after? 使这些列表元素display: inline-block
并添加text-align: center
到包装的text-align: center
,这是您要的吗? Then you would need to fix the background color, of course, but that should be easy. 然后,您当然需要修复背景色,但这应该很容易。 But the things will be centered in any case. 但是无论如何,事情都会成为中心。
https://jsfiddle.net/fnsyshzw/1/ https://jsfiddle.net/fnsyshzw/1/
* { padding: 0px; margin: 0px; } .counter-wrapper { background: #fe6261; padding-top: 37px; padding-bottom: 36px; border-top: 1px solid #fe4e4d; border-bottom: 1px solid #fe4e4d; text-align: center; } .counter-inner ul{ list-style: none; } .counter-inner ul li { display: inline-block; width: 14.84375%; /*190px;*/ } .counter-image { display: block; width: 66px; height: 70px; border-right: 2px solid #fc6867; float: left; } .counter-image.first { background: url('../images/counter-1.png') 10px 15px no-repeat; } .counter-image.second { background: url('../images/counter-2.png') 10px 15px no-repeat; } .counter-image.third { background: url('../images/counter-3.png') 10px 15px no-repeat; } .counter-image.fourth { background: url('../images/counter-4.png') 10px 15px no-repeat; } .counter-number { font-family: 'Roboto', sans-serif; font-size: 30px; color: #fd7e7e; float: left; padding: 12px 18px 0px; } .counter-text { float: left; font-size: 10px; color: #fd7e7e; padding: 4px 18px 0; }
<div class="counter-wrapper"> <div class="counter-inner clrfix"> <ul> <li> <span class="counter-image first"></span> <span class="counter-number">4</span> <span class="counter-text">CREATIVES</span> </li> <li> <span class="counter-image second"></span> <span class="counter-number">6</span> <span class="counter-text">CODERS</span> </li> <li> <span class="counter-image third"></span> <span class="counter-number">4</span> <span class="counter-text">DESIGNERS</span> </li> <li> <span class="counter-image fourth"></span> <span class="counter-number">2</span> <span class="counter-text">WORKERS</span> </li> </ul> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.