Question

我想知道如何将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; 
}

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包装在一个包装器中并应用上面的样式，如下所示：

<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 auto并且它们将居中对齐。

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

以下是添加了该样式的小提琴示例：http://jsfiddle.net/HcQcn/

div中的水平居中元素

3 个答案: