0

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

3 に答える 3

0

.mrow div に幅を割り当てて margin:0px auto を指定すると、中央揃えになります。

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

そのスタイルが追加されたフィドルの例を次に示します: http://jsfiddle.net/HcQcn/

于 2013-07-18T16:10:40.730 に答える