align li-Tag mit CSS gestylt

Question

Ich kann nicht verstehen, warum meine li wie dies schwimmt:

Als ich im Blick JSFIDDLE sie fein ausgerichtet sind. Kann jemand sehen, was falsch ist?

ul { 
 
    counter-reset: section; 
 
    list-style: none; 
 
} 
 
li { 
 
    margin: 0 0 10px 0; 
 
    line-height: 40px; 
 
} 
 
li:before { 
 
    content: counter(section); 
 
    counter-increment: section; 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 40px; 
 
    margin: 0 20px 0 0; 
 
    border: 1px solid #ccc; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
} 
 
**Updated code to question**

<div id="feature"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-md-10 col-md-offset-1 col-sm-12 text-center feature-title"> 
 

 
        <!-- Seminariet bulletpoints --> 
 
        <h2>PÅ BAGGRUND AF SEMINARIET VIL DU</h2> 
 
        
 
         <ul> 
 
          <li>First item</li> 
 
          <li>Second item</li> 
 
          <li>Third item</li> 
 
         </ul> 
 
        
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
**Updated picture** 
 

 
[![enter image description here][3]][3]

Answer 1

Ich denke, das Problem ist, dass Sie text-align:center auf den li oder auf den ul haben (so weit ich von Ihrem Screenshot zu sehen, in Ihrem Code alles in Ordnung ist)

so wollen Sie die li s zentrieren. Sie bleiben so, weil jede li eine andere Textlänge hat, so dass sie korrekt in der Mitte ihrer Eltern ausgerichtet sind Es gibt eine Reihe von Möglichkeiten, sie in der Mitte ausgerichtet und auch schön aufeinander zu machen. dies wäre eine der Lösungen sein

EDIT Zentrierung ul so, wie Sie es haben wollen schauen (ohne text-align:center) ist es problematisch, so dass Sie so etwas wie das folgende Snippet

denken verwenden, muss ich es viel mehr sein wird, ansprechend. wenn nicht, können Sie immer @media query verwenden können, um es 'gut aussehen' auf kleinere Geräte

(auch einige Beispiel @media Queries)

ul { 
 
    counter-reset: section; 
 
    list-style: none; 
 
    position:relative; 
 

 
    padding:0; 
 
    left:45%; 
 
    display:inline-block; 
 
} 
 
li { 
 
    margin: 0 0 10px 0; 
 
    line-height: 40px; 
 

 

 

 
} 
 
li:before { 
 
    content: counter(section); 
 
    counter-increment: section; 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 40px; 
 
    margin: 0 20px 0 0; 
 
    border: 1px solid #ccc; 
 
    border-radius: 100%; 
 
    text-align: center; 
 
    
 
    
 
} 
 
h2 { 
 
text-align:center; 
 
} 
 
@media only screen and (max-width: 640px) { 
 
ul { 
 
    left:40%; 
 
} 
 

 
} 
 
@media only screen and (max-width: 425px) { 
 
ul { 
 
    left:35%; 
 
} 
 

 
} 
 
@media only screen and (max-width: 320px) { 
 
ul { 
 
    left:25%; 
 
} 
 

 
}

<div id="feature"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-md-10 col-md-offset-1 col-sm-12 text-center feature-title"> 
 

 
        <!-- Seminariet bulletpoints --> 
 
        <h2>PÅ BAGGRUND AF SEMINARIET VIL DU</h2> 
 
        <div style="border: 1px solid black;"> 
 
         <ul style="text-align:left"> 
 
          <li>First item</li> 
 
          <li>Second item</li> 
 
          <li>Third item</li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>