CODEWITHSUNDEEP
cssalignmentcss-float
matt
matt

Reputation: 44333

CSS: Aligning floated li's centered inside div?

HTML

<div class="wrapper join-links">
    <ul>
       <li><a href="link">Whatever</a></li>
       <li><a href="link">Something</a></li>
    </ul>
</div>​

CSS

.join-links li {
    float:left;
    margin-right:20px;
}​

Is it somehow possible to align both links "centered" or "justified" inside of the sorrounding wrapper div?

http://jsfiddle.net/CRrmL/

edit: And I also wonder if I can align them right?

Upvotes: 0

Views: 248

Answers (4)

Libin
Libin

Reputation: 2462

You can make the links justified like this. Just define a class to both li and float first li to left and second li to right.

Check this example

Upvotes: 1

David
David

Reputation: 510

You can do this through the common margin hack for centering:

.join-links ul{
    margin:0 auto;
}

Then you need to set the li elements to be displayed in line:

.join-links li {
    display:inline;
}​

Upvotes: 1

Sergey Litvinenko
Sergey Litvinenko

Reputation: 593

To align alinks to the right or center you need use text align and display inline or inline-block to li element. Float property transforms any element to a block. http://jsfiddle.net/CRrmL/15/ http://jsfiddle.net/CRrmL/16/

Upvotes: 1

jacktheripper
jacktheripper

Reputation: 14229

Change float: left to display: inline to give you:

.join-links li {
    display: inline;
    margin-right:20px;
}​

You can then use text-align on the parent div.

Example centre align
Example right align

Upvotes: 4

Related Questions