Automatyczne marginesy nie wyśrodkowują obrazu na stronie

W pewnych okolicznościach (takich jak wcześniejsze wersje IE, Gecko, Webkit) i dziedziczenie, elementy z position:relative; uniemożliwią margin:0 auto; działanie, nawet jeśli top, right, bottom, i {[5] }nie są ustawione.

Ustawienie elementu na position:static; (domyślne) może to naprawić w tych okolicznościach. Ogólnie rzecz biorąc, elementy poziomu bloku o określonej szerokości będą respektować margin:0 auto; za pomocą pozycjonowania relative lub static.

Możesz wyśrodkować auto szerokość div używając display:table;

div{
margin: 0px auto;
float: none;
display: table;
}

W moim przypadku problem polegał na tym, że ustawiłem min i max szerokość Bez szerokość.

Ilekroć nie dodamy szerokości i nie dodamy margin:auto, to chyba nie zadziała. To z mojego doświadczenia. Szerokość daje pojęcie, gdzie dokładnie musi zapewnić równe marginesy.

Istnieje alternatywa dla margin-left:auto; margin-right: auto; LUB margin:0 auto; dla tych, którzy używają position:absolute; Oto jak:
ustawiasz lewą pozycję elementu na 50% (left:50%;), ale to nie wyśrodkuje go poprawnie aby element był wyśrodkowany, musisz dać mu margines minus połowę jego szerokości, który będzie idealnie wyśrodkował twój element

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

Dla przycisku bootstrap:

display: table; 
margin: 0 auto;

Umieść to w css ciała: background: # 3D668F; następnie dodaj: wyświetlacz: block; margines: auto; do css img.

Pamiętam, że kiedyś spędziłem dużo czasu próbując wyśrodkować div, używając margin: 0 auto.

Miałem display: inline-block na nim, kiedy go usunąłem, div wyśrodkował poprawnie.

Jak zauważył Ross, nie działa on na elementach wbudowanych.

Img{display: flex; max-width: 80%; margin: auto;}

To działa na mnie. W tym przypadku można również użyć display: table. Co więcej, jeśli nie chcesz trzymać się tego podejścia, możesz użyć następującego:

Img{position: relative; left: 50%;}