1

のすべての要素を中央に配置する必要があります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;
}
4

6 に答える 6

7

この方法を試してください

ul.problem li{margin:0 auto;}

デモ

于 2013-07-19T10:35:25.127 に答える
1

これを見てください - http://jsfiddle.net/2y7R8/

私がしたことは、ul に幅を設定し、margin: 0 auto中央に追加することだけでした。

于 2013-07-19T10:36:01.797 に答える
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;

/* ファイアフォックス */

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;
}
于 2013-07-19T10:39:16.570 に答える
0

削除してみてください

ul
{
  text-align: justify;
}

すなわち

ul {
    list-style: none;
    background-color: yellow;
}
于 2013-07-19T10:40:11.923 に答える