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;"/>

— 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

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