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中的水平居中元素

回答

相关问题