html - 在容器中居中 ul

Question

我这里有一个 jsfiddle - http://jsfiddle.net/dpynebnf/

非常简单，我只是想让 ul 在它的容器中居中。

我不想使用 text-align: center;因为我仍然希望文本左对齐，但我希望整个 block 居中

    <div class="container">

        <div class="row">

                <div class="col-sm-12 col">


                    <ul>

                        <li>
                            <h3>Sone Title</h3>
                            <p>Some text some text some text some text some text some text </p>
                        </li>


                        <li>
                            <h3>Sone Title</h3>
                            <p>Some text some text some text some text some text some text </p>
                        </li>


                        <li>
                            <h3>Sone Title</h3>
                            <p>Some text some text some text some text some text some text </p>
                        </li>


                        <li>
                            <h3>Sone Title</h3>
                            <p>Some text some text some text some text some text some text </p>
                        </li>


                    </ul>

                </div>

            <!--<div class="col-sm-1"></div>-->

        </div>

    </div>

Answer 1

保留 text-align: center 并使用 text-align: left 在子元素中覆盖它:

.col {
    background: blue;
    text-align: center;
}
ul {
    border: 1px solid red;
    color: white;
    text-align: left;
    display: inline-block;
    list-style: none;
    margin: 0  auto;
}

http://jsfiddle.net/dpynebnf/3/

或

也许您正在寻找display: table

ul {
    border: 1px solid red;
    color: white;
    display: table;
    list-style: none;
    margin: 0  auto;
}

http://jsfiddle.net/dpynebnf/1/