Question

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

超级简单，我只是想把ul放在它的内容中。

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

    <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/

OR

也许你正在寻找display: table

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

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

Answer 2

您可以使用text-align: center;。您只需将UL文本重新对齐到左侧：

DEMO

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

Answer 3

你几乎拥有它。您只需要向ul添加text-align left http://jsfiddle.net/dpynebnf/5/

Answer 4

我（希望）你的意思是this

这是使用整个列表中的text-align: center;属性，并使用li覆盖text-align: left;。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

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

尝试这个.it也可以用来添加任何新的html元素

中心ul在容器中

5 个答案: