li und p horzontal Ausrichtung

Question

Eines der Probleme, mit denen ich konfrontiert bin, ist, dass ich eine Flexbox habe (die irrelevant sein sollte) mit einem inneren div, das horizontal im Elternteil zentriert ist. Ich möchte, dass eine ungeordnete Liste horizontal mit dem Text im inneren div ausgerichtet wird, aber selbst mit text-align: center scheint es um ein paar Pixel (rechts) nach unten zu sein und ich kann nicht herausfinden warum (ich kann Ich glaube, ich habe dieses Problem bis jetzt noch nie erlebt. Das '.right'-Div ist eigentlich ein Kind eines anderen Elements, aber das sollte irrelevant sein, also poste ich nur den Teil, den ich wirklich brauche. Ist das nur ein Produkt der ursprünglichen Stile der ul?

.right { 
 
    text-align: center; 
 
    order: 2; 
 
    //background: yellow; 
 
    flex-basis: 100%; 
 
    height: 100%; 
 
} 
 

 
.right .headbox{ 
 
    border-bottom: 1px solid orange; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
.right .list{ 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
ul{ 
 
    list-style: none; 
 
} 
 

 
.headbox h3{ 
 
    color: orange; 
 
}

<div class="right"> 
 
    
 
    <div class="headbox"> 
 
    <h3>Visit Us</h3> 
 

 
    </div> 
 

 
    <div class="list"> 
 
    <ul> 
 
     <li>Overview</li> 
 
     <li>Hours</li> 
 
     <li>Admission</li> 
 
     <li>Directions</li> 
 
    </ul> 
 
    </div> 
 

 
</div>

Answer 1

hinzufügen padding: 0 zu Ihrem <ul> des Browsers Standardstil außer Kraft zu setzen.

Answer 2

Ihre <ul> haben immer noch den Standard-Padding aus dem Standard-Stylesheet des Browsers.

Sie können padding-left: 0; verwenden, um diese Auffüllung zu deaktivieren.

ul{ 
    list-style: none; 
    padding-left: 0; 
} 

.right { 
 
    text-align: center; 
 
    order: 2; 
 
    //background: yellow; 
 
    flex-basis: 100%; 
 
    height: 100%; 
 
} 
 

 
.right .headbox{ 
 
    border-bottom: 1px solid orange; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
.right .list{ 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
ul{ 
 
    list-style: none; 
 
    padding-left: 0; 
 
} 
 

 
.headbox h3{ 
 
    color: orange; 
 
}

<div class="right"> 
 

 
    <div class="headbox"> 
 
    <h3>Visit Us</h3> 
 

 
    </div> 
 

 
    <div class="list"> 
 
    <ul> 
 
     <li>Overview</li> 
 
     <li>Hours</li> 
 
     <li>Admission</li> 
 
     <li>Directions</li> 
 
    </ul> 
 
    </div> 
 

 
</div>