<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
div
Rozszerza się do 100% tak jak powinien, ale obraz nie wyśrodkować siebie. Czemu?
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
div
Rozszerza się do 100% tak jak powinien, ale obraz nie wyśrodkować siebie. Czemu?
Odpowiedzi:
Ponieważ twój obraz jest elementem inline-block . Możesz to zmienić na element blokowy, taki jak ten:
<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />
i będzie wyśrodkowany.
Musisz wyrenderować go jako poziom bloku;
img {
display: block;
width: auto;
margin: auto;
}
Dodaj style="text-align:center;"
wypróbuj poniższy kod
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="text-align:center;vertical-align:middle;">
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
display: block;
do obrazu jest wysoce zalecane.
Wiem, że to stary post, ale chciałem się podzielić, jak rozwiązałem ten sam problem.
Mój obraz dziedziczył zmiennoprzecinkowy: po lewej z klasy nadrzędnej. Ustawiając float: none udało mi się zrobić margin: 0 auto i display: block działają poprawnie. Mam nadzieję, że może to komuś pomóc w przyszłości.
Odkryłem, że muszę zdefiniować określoną szerokość obiektu, bo inaczej nic innego nie sprawi, że będzie on wyśrodkowany. Względna szerokość nie działa.
otwórz, div
a następnie włóż
style="width:100% ; margin:0px auto;"
image
tag (lub) treść
zamknij div
Znalazłem ... margines: 0 auto; pracuje dla mnie. Ale widziałem też, że to NIE działa, ponieważ klasa została pokonana przez inną specyfikę, która miała ... float: left; więc uważaj, być może trzeba będzie dodać ... float: none; zadziałało to w moim przypadku, ponieważ kodowałem zapytanie o media.