CODEWITHSUNDEEP
htmlcss
sam
sam

Reputation: 2579

horizontal centering elements in div

I am wondering how to center elements within a div but keep the text left aligned.

Here is a jfiddle of what I have so far. I want the text to be in the middle of the div but to maintain its left justification.

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

Upvotes: 0

Views: 483

Answers (3)

Joe_G
Joe_G

Reputation: 906

Just assign your .mrow divs a width and give them margin:0px auto and they will be center aligned.

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

Here's an example of your fiddle with that style added: http://jsfiddle.net/HcQcn/

Upvotes: 0

boz
boz

Reputation: 4908

You can try something like this - 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;
}

Upvotes: 1

mcbex
mcbex

Reputation: 444

You can get this effect by making the container div 50% width then floating it to the right. So in your fiddle add: 

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

If you want to keep the blue background you'll need to wrap all the .mrow divs in a wrapper and apply the styles above so like: 

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

Then:

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

Upvotes: 0

Related Questions