div中的水平居中元素

我想知道如何在div中居中元素但保持文本左對齊。div中的水平居中元素

這是我迄今爲止所做的一件小事。我希望文本位於div的中間，但要保持其左側的正確性。

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

來源

2013-07-18 sam

我會通過固定的無效的標記開始 - 你不能有一個'ul'內'div'。 – boz

我不明白你想要什麼，你可以做一個模型？ – PaoloCargnin

你可以嘗試這樣的事情 - 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; 
}

來源

2013-07-18 15:52:55 boz

您可以通過使div容器50％的寬度則浮動的權利得到這個效果。因此，在您添加小提琴：

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

如果你想保持藍色背景你需要包裝的所有.mrow的div中包裝和應用上面等等之類的風格：

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

來源

2013-07-18 15:51:35 mcbex

只需指定您.mrow div的寬度，給他們保證金：0px auto的，他們將中心對齊。

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

這是你擺弄的一個例子與風格說：http://jsfiddle.net/HcQcn/

來源

2013-07-18 16:10:40

div中的水平居中元素

回答

相關問題