центр уль в контейнере

Question

У меня есть jsfiddle здесь - http://jsfiddle.net/dpynebnf/

супер просто, я просто пытаюсь центрирования ул в это conatiner.

Я не хочу использовать 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/

ИЛИ

Возможно, вы ищете 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 http://jsfiddle.net/dpynebnf/5/

Answer 4

я (надеюсь) вы имеете в виду что-то вроде this

Это использует text-align: center; собственность на весь список и переопределяет li с помощью text-align: left;.

.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; 
 
}

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

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

попробовать это .it будет также работать с нашими добавить любой новый HTML элемент