Automatyczne marginesy nie wyśrodkowują obrazu na stronie

97

W tym przykładzie obraz nie jest wyśrodkowany. Czemu? Moja przeglądarka to Google Chrome 10 w systemie Windows 7, a nie IE.

<img src="/img/logo.png" style="margin:0px auto;"/>
css google-chrome margin centering Projektant stron internetowych
źródło
Testując klasę stylu, stwierdziłem, że to nie działa margin: 0 auto; po kilku testach okazało się, że jeśli nazwa klasy, którą dodajesz do elementu, ma taką samą nazwę jak element, to nie zadziała.
LostLight

Odpowiedzi:

218

dodaj display:block;i zadziała. Obrazy są domyślnie wbudowane

Aby wyjaśnić, domyślna szerokość blockelementu to auto, co oczywiście wypełnia całą dostępną szerokość elementu zawierającego.

Ustawiając margines na auto, przeglądarka przypisuje połowę pozostałej przestrzeni do, margin-lefta drugą połowę do margin-right.

Ross
źródło
12
+1 za rację. Byłoby świetną odpowiedzią, gdybyś wyjaśnił, co jest potrzebne, margin:autoaby wyśrodkować element w przepływie. ( display:blocklub display:table, position:staticlub position:relative, itp.)
Phrogz
1
@Phrogz zgodził się; dodał jakieś wyjaśnienie.
Ross
15
Ci, którzy to czytają, mogą również uznać za przydatne dodanie „float” none, ponieważ posiadanie innego rodzaju float obniży wartość auto margin.
Code Whisperer
Ale nadal nie jest wyśrodkowany. Jest wyśrodkowany tylko w poziomie. Chcę wyśrodkować go w pionie, ale nawet jeśli zmienię go 0px autona zwykły auto, nadal nie działa.
Aaron Franke,
14

W pewnych okolicznościach (jak we wcześniejszych wersjach IE, Gecko, Webkit) i dziedziczenia, elementy z position:relative;zapobiegnie margin:0 auto;z pracy, nawet jeśli top, right, bottom, i leftnie są ustawione.

Ustawienie elementu na position:static;(domyślne) może to naprawić w tych okolicznościach. Ogólnie rzecz biorąc, elementy blokowe o określonej szerokości będą respektowane margin:0 auto;przy użyciu pozycjonowania albo relativelub static.

Brendan
źródło
1
margin: 0 autodziała dobrze na względnie pozycjonowanych elementach, o ile są to elementy blokowe bez pływaka i określonej szerokości ...
Ennui
Zakładam, że to sarkazm. Jeśli zmodyfikujesz swoją odpowiedź, aby nie była niedokładna, usunę głos przeciw. Piszę CSS od prawie 15 lat i nie mogę sobie przypomnieć, aby automatyczne marginesy nie działały w celu poziomego wyśrodkowania względnie ustawionych elementów o stałej szerokości - chociaż inne właściwości, takie jak floati displaymogą zmienić to zachowanie.
Ennui
14

Możesz wyśrodkować automatyczną szerokość div za pomocą display:table;

div{
margin: 0px auto;
float: none;
display: table;
}
sameeuor
źródło
1
To działa i nie wiem dlaczego. Czy możesz wytłumaczyć?
ThatsJustCheesy
1
Nigdy wcześniej tego nie używałem, ale teraz działa.
zkytony
10

W moim przypadku problem polegał na tym, że ustawiłem minimalną i maksymalną szerokość bez samej szerokości .

Daniel Sitarz
źródło
3
podsumowując: element musi być position:static, mieć ustalony width:zestaw i być display:blockelementem
Joey T
Było szerokość problem dla mnie też - bootstrap automatycznie ustawia moje div użycie 100% dostępnego
Edmund Sulzanok
6

Jeśli nie dodamy szerokości i nie dodamy margin:auto, myślę, że to nie zadziała. To z mojego doświadczenia. Szerokość daje wyobrażenie, gdzie dokładnie musi zapewnić równe marginesy.

tejaswini pant
źródło
2

istnieje alternatywa dla margin-left:auto; margin-right: auto;lub margin:0 auto;dla tych, które używają w position:absolute;ten sposób:
ustawiasz lewą pozycję elementu na 50% ( left:50%;), ale to nie wyśrodkuje go poprawnie, aby element był prawidłowo wyśrodkowany, musisz nadać mu margines minus połowa jego szerokości, który idealnie wyśrodkuje Twój element

oto przykład: http://jsfiddle.net/35ERq/3/

Andrei
źródło
0

W przypadku przycisku bootstrap:

display: table; 
margin: 0 auto;
Abram
źródło
0

umieść to w css ciała: tło: # 3D668F; następnie dodaj: display: block; margines: auto; do pliku css img.

Gail
źródło