Automatische Ränder zentrieren das Bild nicht auf der Seite

97

In diesem Beispiel ist das Bild nicht zentriert. Warum? Mein Browser ist Google Chrome v10 unter Windows 7, nicht IE.

<img src="/img/logo.png" style="margin:0px auto;"/>
css google-chrome margin centering Webdesigner
quelle
Beim Testen einer Stilklasse stellte ich fest, dass dies nicht funktioniert. Rand: 0 auto; Nach einigen Tests wurde festgestellt, dass dies nicht funktioniert, wenn der Klassenname, den Sie einem Element hinzufügen, denselben Namen wie ein Element hat.
LostLight

Antworten:

218

hinzufügen display:block;und es wird funktionieren. Bilder sind standardmäßig inline

Zur Verdeutlichung ist die Standardbreite für ein blockElement auto, die natürlich die gesamte verfügbare Breite des enthaltenen Elements ausfüllt.

Durch Setzen des Randes auf autoweist der Browser die Hälfte des verbleibenden Speicherplatzes margin-leftund die andere Hälfte zu margin-right.

Ross
quelle
12
+1 Um richtig zu sein. Wäre eine gute Antwort, wenn Sie näher erläutern würden, was erforderlich ist, um margin:autoein Element im Fluss zu zentrieren. ( display:blockoder display:table, position:staticoder position:relative, etc.)
Phrogz
1
@Phrogz stimmte zu; fügte eine Erklärung hinzu.
Ross
15
Diejenigen, die dies lesen, finden es möglicherweise auch nützlich, "float" none hinzuzufügen, da eine andere Art von float Ihre Marge automatisch sprengt.
Code Whisperer
Aber es ist immer noch nicht zentriert. Es ist nur horizontal zentriert. Ich möchte es vertikal zentrieren, aber selbst wenn ich 0px autozu "Nur" wechsle , autofunktioniert es immer noch nicht.
Aaron Franke
14

Unter bestimmten Umständen (wie frühere Versionen von IE, Gecko, Webkit) und Vererbung, mit Elementen position:relative;verhindert margin:0 auto;von der Arbeit, auch wenn top, right, bottom, und leftsind nicht festgelegt.

Wenn Sie das Element auf position:static;(Standardeinstellung) setzen, kann es unter diesen Umständen behoben werden. Im Allgemeinen berücksichtigen Elemente auf Blockebene mit einer bestimmten Breite margin:0 auto;entweder die Positionierung relativeoder die staticPositionierung.

Brendan
quelle
1
margin: 0 autofunktioniert gut auf relativ positionierten Elementen, solange es sich um Blockelemente ohne Float und mit einer bestimmten Breite handelt ...
Ennui
Ich nehme an, das ist Sarkasmus. Wenn Sie Ihre Antwort so bearbeiten, dass sie nicht ungenau ist, entferne ich die Ablehnung. Ich schreibe seit fast 15 Jahren CSS und kann mich nicht erinnern, dass automatische Ränder nicht dazu dienen, relativ positionierte Elemente mit fester Breite horizontal zu zentrieren - obwohl andere Eigenschaften dieses Verhalten mögen floatund displayändern können.
Ennui
14

Sie können auto width div mit zentrieren display:table;

div{
margin: 0px auto;
float: none;
display: table;
}
Sameeuor
quelle
1
Das funktioniert und ich weiß nicht warum. Könntest du erklären?
ThatsJustCheesy
1
Ich habe das noch nie benutzt, aber es funktioniert jetzt für mich.
Zkytony
10

In meinem Fall war das Problem, dass ich die minimale und maximale Breite ohne Breite selbst eingestellt hatte.

Daniel Sitarz
quelle
3
um es noch einmal zusammenzufassen: Element muss sein position:static, eine feste width:Menge haben und ein display:blockElement sein
Joey T
Es war auch für mich ein Breitenproblem - Bootstrap stellte mein Div automatisch so ein, dass es 100% verfügbar war
Edmund Sulzanok
6

Wann immer wir nicht Breite hinzufügen und hinzufügen margin:auto, wird es wahrscheinlich nicht funktionieren. Es ist aus meiner Erfahrung. Die Breite gibt die Idee, wo genau sie benötigt wird, um gleiche Ränder bereitzustellen.

Tejaswini Hose
quelle
2

Es gibt eine Alternative zu margin-left:auto; margin-right: auto;oder margin:0 auto;für diejenigen, die position:absolute;dies verwenden:
Sie setzen die linke Position des Elements auf 50% ( left:50%;), aber das zentriert es nicht richtig, damit das Element richtig zentriert wird, müssen Sie ihm ein geben Rand von minus der Hälfte seiner Breite, der Ihr Element perfekt zentriert

Hier ist ein Beispiel: http://jsfiddle.net/35ERq/3/

Andrei
quelle
0

Für eine Bootstrap-Schaltfläche:

display: table; 
margin: 0 auto;
Abram
quelle
0

füge dies in das CSS des Körpers ein: Hintergrund: # 3D668F; dann füge hinzu: display: block; Rand: Auto; zum css des img.

Gail
quelle