我必须将所有元素集中在div.to_left_60
中。我需要的解决方案适用于那里的所有元素。
为此,我设置了text-align: center
。它适用于文本,但不适用于我的ul元素。我曾尝试使用边距和absolute/relative
,但没有运气。
ul.problem是我必须在这个div中居中的元素。从jsfiddle,你会看到白色背景不居中。
HTML
<div class="to_left_40">gtestsetes</div>
<div class="to_left_60">
<p>gtestsetes</p>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTvZsT7cLwPFCC0joFhZoi6OylhGaIVHBPYn--PrH3nzZdMwH0grA" width="265px" />
<ul class="problem">
<li>fsfsd</li>
<li>fsfsd</li>
</ul>
<ul>
<li>fsfsd</li>
<li>fsfsd</li>
</ul>
CSS
ul {
list-style: none;
text-align: justify;
background-color: yellow;
}
ul.problem li {
list-style-type: none;
display: block;
width: 245px;
height: 164px;
padding: 14px 10px 0 10px;
background-color: white;
background-repeat: no-repeat;
text-align: center;
font-size: 18px;
}
.to_left_40 {
float: left;
width: 40%;
background-color: red;
}
.to_left_60 {
float: left;
width: 60%;
background-color: green;
text-align: center;
}
JSFiddle:http://jsfiddle.net/qVTQ4/
编辑:(污染)
这有助于:
ul.problem li{margin:0 auto;}
我修改了这个溶液:
.to_left_60 * {
margin:0 auto;
}
答案 0 :(得分:7)
答案 1 :(得分:1)
看看这个 - http://jsfiddle.net/2y7R8/
我所做的只是在ul上设置宽度并添加margin: 0 auto
以使其居中。
答案 2 :(得分:0)
尝试Box-align
div
{
width:350px;
height:100px;
border:1px solid black;
/ * Internet Explorer 10 * /
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/ * Firefox * /
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/ * Safari,Opera和Chrome * /
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/ * W3C * /
display:box;
box-pack:center;
box-align:center;
}
答案 3 :(得分:0)
尝试删除
ul
{
text-align: justify;
}
即
ul {
list-style: none;
background-color: yellow;
}
答案 4 :(得分:0)
试试这个
ul.problem li {
margin:0 auto;
}
这可以在中心设置ui块。它从双方都有相同的差距。
答案 5 :(得分:0)
您可以声明ul { padding:0; }
看起来您的li居中但父亲ul有默认填充。