CODEWITHSUNDEEP
htmlcss
Magdi Gamal
Magdi Gamal

Reputation: 678

How to center a text while still being aligned to the left/right?

I have an unordered vertical list..

 <div>
 <ul>
 <li>home</li>
 <li>portfolio</li>
 <li>about</li>
 <li>contact</li>
 </ul>
 </div>

css:

 div {
 width: 600px;
 }
 ul {
 text-align: center;
 }

What I really want is the list to be text aligned left, while the ul is still horizontally in the center. is there a way to that?

Upvotes: 1

Views: 69

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241258

You can do something like this to center dynamically generated content of varying widths:

div { text-align: center; }

ul { display: inline-block; }

li { text-align: left; }

jsFiddle example

Alternatively, you can set a defined width on the parent, and use margin:0px auto, assuming it is a block level element.

ul {
    width: 100px;
    margin: 0px auto;
}

jsFiddle example

Upvotes: 3

Related Questions