Wie können Sie Listenelemente in einer ungeordneten Liste ausrichten, die in einem div zentriert ist?

Question

Ich habe ein div in einem div in einem div:

<div id="wrapper" class="center"> 
    <div id="content" class="center"> 
     <div id="listDiv" class="center"> 
      <ul> 
       <li><a href='#' id="1" >Link one</a> </li> 
       <li><a href='#' id="2" >Link 2</a> </li> 
       <li><a href='#' id="3" >Link three</a> </li> 
      </ul> 
     </div> 
    </div> 
</div> 

In meinem Stylesheet, habe ich eine Klasse, die jedes div innerhalb der Seite Zentren und Zentren Dinge innerhalb des div:

div.center{ 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 

Ich möchte, dass meine ungeordnete Liste im div zentriert bleibt, aber für jeden Listeneintrag, der unter dem anderen zu belassen ist. Alles, was ich versucht habe, zentriert die Listenelemente zueinander. Was vermisse ich?

Answer 1

sein kann lösen, sollten Sie dies wünschen.

Um zu erreichen, was Sie wollen, haben Sie display: table; zu Ihrem div geben.

div.center { 
    margin-left: auto; 
    margin-right: auto; 
    display: table; 
} 

ul { 
    text-align: left; 
} 

Answer 2

Fügen Sie einfach

ul { 
    text-align: left; 
} 

Answer 3

Es sieht aus wie Ihre Liste ist die text-align: center; vererben, so versuchen, die div.listDiv oder div.listDiv ul zu text-align: left; Einstellung.

Ich glaube, das Ihr Problem

Answer 4

Haben Sie versucht:

#listDiv.ul { 
    text-align: left; 
} 

Dadurch wird der Text in jedem UL linksbündig auszurichten, die innerhalb eines div mit der ID von listDiv enthalten ist.

Wenn Sie nur die folgende geben:

ul { 
    text-align: left; 
} 

Dann werden Sie den Text von JEDEM UL überall linksbündig auszurichten.