Zentrierung Probleme

Question

Ich versuche, die Seite mit einem horizontal zentrierten Bild und einige Schaltflächen darunter zu machen. Ich habe das Bild zentriert mit

.Image { display:block; margin:auto; } 

Das hat super funktioniert! Ich stieß auf einige Probleme, als ich versuchte, einen Knopf zu zentrieren, der schwebte. Ich habe gelesen, dass es unmöglich ist, und so zurückgegriffen werden:

ul li{display:inline-block;} 

und

body{text-align:center;} 

Es funktionierte, aber die zwei Elemente scheinen nicht ausgerichtet sind. Es scheint, dass die Tasten ein paar Pixel aus sind. Hier ist das Ergebnis:

Screen shot of misalignment when using 2 different methods

Ich bin nicht sicher, wie man sie richtig zu zentrieren.

Answer 1

margin: 0 auto; funktioniert nicht auf display: inline-block;.

1. Wenn Sie margin: 0 auto; verwenden möchten, verwenden Sie display: block oder display: table; /* which is not good */

2. und, wenn Sie mit display: inline-block; gehen wollen, fügen Sie text-align: center; es Eltern.

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 

 
ul li { 
 
    display: inline-block; 
 
}

<ul> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>c</li> 
 
    <li>d</li> 
 
    <li>e</li> 
 
    <li>f</li> 
 
</ul>

---

Für weitere Informationen

Center Things

Centering in CSS: A Complete Guide

Answer 2

können Sie versuchen:

.Image { margin:0px auto; } 

Wenn Sie auch ein div haben .... Sie diese Co-ord zum Zentrieren können .....