在div的左侧也将其对齐

Question

Im trying to align some links at center of my div, but I also want that text of my links are aligned at left.

But Im not having sucess doing this, I am able to align to the left or to the center but not both simultaneously.

Do you know how we can do this?

Here I have demonstration of what Im getting: http://jsfiddle.net/HRKN4/

I have this html:

<div  class="container">
    <h3>Title:</h3>
    <div class="content">
       <ul class="links">
          <li> <a  href="#">&raquo;&raquo; This link is bigger</a></li>
          <li> <a  href="#">&raquo;&raquo; Smaller 1</a></li>
          <li> <a  href="#">&raquo;&raquo; link 1</a></li> 
       </ul>
     </div>
</div>

And this CSS:

.container
{
    text-align:center;
    width:100%;
    margin:0 auto 0 auto;
    background:pink;
}

.content
{
    width:100%;
    height:300px;
}

.links 
{
    list-style-type:none;
    margin:0 auto; 
}

.links li a 
{
    text-decoration:none;
    background:red;
    color:#000;
    margin-top:20px;
    margin:0 auto; 
}

Answer 1

You can use table layout :

.links {
   display:table;
}

And

.links li a {
   display:table-row;
}

Example

Or just

.links li{
    text-align : left;
}

Instead of display:table-row;

Example

Answer 2

You can specify a width for the "content" div and then center it using margin:0 auto; that way you can still use text-align:left; to left-align the text within the div while still keeping the div centered on the document.

Here is an updated JSFiddle

Answer 3

You can try:

.links 
{
    display: inline-block;
    list-style-type:none;
    margin:0 auto; 
    text-align: left;
}

See demo at: http://jsfiddle.net/audetwebdesign/m9daD/

Answer 4

Another option:

.links 
{
    list-style-type:none;
    width:50%;
    float:right;
}

http://jsfiddle.net/HRKN4/17/

Answer 5

If you set ..containerlinks to display:inline-block; and text-align:center; it should be enough.

ul will take the width of the longest link and will be centered from text-align:center; All links can be aligned left inside it .

DEMO

---

.container {
    text-align:center;
    background:pink;
}
.content {
}
.links {
    list-style-type:none;
    display:inline-block;/* as an inline boxe it will centered from text align on .container */
    text-align:left;/* content will be aligned towards left */
}
.links li a {
    text-decoration:none;
    background:red;
    color:#000;
}