div中的中心元素

时间:2013-07-19 10:32:30

标签: html css

我必须将所有元素集中在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;
}

6 个答案:

答案 0 :(得分:7)

试试这种方式

ul.problem li{margin:0 auto;}

<强> Demo

答案 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有默认填充。