горизонтальные центрирующие элементы в div

Question

Мне интересно, как центрировать элементы в div, но сохраняйте текст влево.

Вот jfiddle того, что у меня есть до сих пор. Я хочу, чтобы текст находился в середине div, но чтобы сохранить его левое оправдание.

http://jsfiddle.net/MgcDU/5994/

HTML:

<div class="span4" id="middleFooter"> 
    <div class="mcont" > 
     <div class="mrow"> <h5 class="tcell"><b>Useful Links</b></h5> </div> 
     <ul> 
      <div class="mrow"> <li class="tcell"><a href="#">Contact Us</a></li> </div> 
      <div class="mrow"> <li class="tcell"><a href="#">About Us</a></li> </div> 
      <div class="mrow"> <li class="tcell"><a href="#">Copyright Information</a></li> </div> 
      <div class="mrow"> <li class="tcell"><a href="#">Terms & Conditions</a></li> </div> 
     </ul> 
    </div> 
</div> 

CSS:

#middleFooter { 
    color: #ccc2a0; 
} 

.mcont { 
    background-color: blue; 
} 

.mrow li { 
    background-color: red; 
    margin-left: auto; 
    margin-right: auto; 
} 

.mrow h5 { 
    display: table-row; 
    background-color: yellow; 
} 

.tcell { 
    display: table-cell; 
} 

Answer 1

Вы можете попробовать что-то вроде этого - http://jsfiddle.net/GxgrL/

HTML:

<div class="span4" id="middleFooter"> 
    <div class="mcont" > 
     <div class="mrow"> <h5 class="tcell"><b>Useful Links</b></h5> </div> 
     <ul> 
      <li class="tcell"><a href="#">Contact Us</a></li> 
      <li class="tcell"><a href="#">About Us</a></li> 
      <li class="tcell"><a href="#">Copyright Information</a></li> 
      <li class="tcell"><a href="#">Terms & Conditions</a></li> 
     </ul> 
    </div> 
</div> 

CSS:

#middleFooter { 
    color: #ccc2a0; 
} 

.mcont { 
    background-color: blue; 
} 

li { 
    background-color: red; 
    display: block; 
    text-align: center; 
} 

li a { 
    background-color: green; 
    display: inline-block; 
    margin: 0 auto; 
    width: 170px; 
    text-align: left; 
} 

.mrow { 
    text-align: center; 
} 

.mrow h5 { 
    display: inline-block; 
    background-color: yellow; 
    text-align: left; 
    width: 170px; 
} 

Answer 2

Вы можете получить этот эффект, делая контейнер Div ширину 50%, то плавающая вправо. Так что в вашей скрипке добавить:

.mcont { 
    width: 50%; 
    float: right; 
} 

Если вы хотите сохранить синий фон вам нужно обернуть все .mrow дивы в обертке и применить стили выше, так как:

<div class="mcont" > 
    <div class="wrapper"> 
     <div class="mrow"> <h5 class="tcell"><b>Useful Links</b></h5> </div> 
     <ul> 
      <div class="mrow"> <li class="tcell"><a href="#">Contact Us</a></li> </div> 
      <div class="mrow"> <li class="tcell"><a href="#">About Us</a></li> </div> 
      <div class="mrow"> <li class="tcell"><a href="#">Copyright Information</a></li> </div> 
      <div class="mrow"> <li class="tcell"><a href="#">Terms & Conditions</a></li> </div> 
     </ul> 
    </div> 
</div> 

Тогда:

.wrapper { 
    width: 50%; 
    float: right; 
} 

Answer 3

Просто назначить ваш .mrow DIVS ширину и дать им запас: 0px автомобиль, и они будут выровнен по центру.

.mrow{ 
    width:20%; 
    margin:0px auto; 
} 

Вот пример вашей скрипки с добавил, что стиль: http://jsfiddle.net/HcQcn/