Automatyczne marginesy nie wyśrodkowują obrazu na stronie
W Ten przykład obraz nie jest wyśrodkowany. Dlaczego? Moja przeglądarka to Google Chrome v10 w systemie windows 7, nie IE.
<img src="/img/logo.png" style="margin:0px auto;"/>
10 answers
Dodaj {[0] } i będzie działać. Obrazy są domyślnie wbudowane
Dla wyjaśnienia, domyślną szerokością elementu block
jest auto
, która 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-left
, a drugą połowę do margin-right
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-04-20 17:32:15
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
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-02 20:18:34
Możesz wyśrodkować auto szerokość div używając display:table;
div{
margin: 0px auto;
float: none;
display: table;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-04 09:29:01
W moim przypadku problem polegał na tym, że ustawiłem min i max szerokość Bez szerokość.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-31 17:36:44
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-28 22:31:23
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/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-26 01:15:10
Dla przycisku bootstrap:
display: table;
margin: 0 auto;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-17 18:42:14
Umieść to w css ciała: background: # 3D668F; następnie dodaj: wyświetlacz: block; margines: auto; do css img.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-09 03:21:27
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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-26 21:59:04
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%;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-11-08 03:20:02