0

我想知道如何在 div 中居中元素但保持文本左对齐。

这是我到目前为止所拥有的东西。我希望文本位于 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; 
}
4

3 回答 3

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;
}
于 2013-07-18T15:52:55.433 回答
0

您可以通过将容器 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-18T15:51:35.217 回答
0

只需为您的 .mrow div 分配一个宽度并给它们 margin:0px auto ，它们将居中对齐。

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

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

于 2013-07-18T16:10:40.730 回答