Dlaczego nie ma marginesu: automatyczne wyśrodkowanie obrazu?

94

<html>
<head>
<title>Test</title>
</head>
<body>
    <div>
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

divRozszerza się do 100% tak jak powinien, ale obraz nie wyśrodkować siebie. Czemu?

html css

— Joe Phillips
źródło

200

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.

— Keltex
źródło

10

Musisz wyrenderować go jako poziom bloku;

img {
   display: block;
   width: auto;
   margin: auto;
}

— TheDeadMedic
źródło

Dlaczego wyrównuje się tylko w poziomie, a nie w pionie?

— Pan Bell,

4

Wyrównanie w pionie nie jest tak proste, jak można by się spodziewać. Wszystko zależy

— TheDeadMedic

8

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>

— Pranay Rana
źródło

Nie sądzę, aby Twoja odpowiedź była nieprawidłowa, ale w Twojej nie ma żadnego wyjaśnienia typu wyświetlania.

— Joe Phillips

Chociaż twoją odpowiedź można uznać za alternatywne rozwiązanie, nie radziłbym tego. Powodem jest to, że jeśli dodasz cokolwiek innego do elementu div, na przykład nagłówka, wyrówna się on ze środkiem obrazu. Aby wyrównać nagłówek do lewej, musiałbyś napisać dla niego więcej stylów. Będziesz musiał to robić dla wszystkiego, co dodasz do div. Dlatego dodanie display: block;do obrazu jest wysoce zalecane.

— Devner

2

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.

— Ryan Hollingsworth
źródło

1

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.

— Catwoman
źródło

2

To nie daje odpowiedzi na pytanie. Aby skrytykować lub poprosić autora o wyjaśnienie, zostaw komentarz pod jego postem - zawsze możesz komentować własne posty, a gdy zdobędziesz wystarczającą reputację , będziesz mógł skomentować każdy post .

— Kristijan Iliev

Chodziło mi o to, że chociaż kilka osób udzieliło odpowiedzi, które działają, działają one tylko wtedy, gdy kod zawiera określoną definicję szerokości obiektu. Np .: <img [... etc., Etc., ...] style = "display: block; margin: auto; width: 200px" /> będzie działać, ale nie używaj rozmiaru względnego, takiego jak „width : 50% ”. Oczywiście, jeśli użyjesz „width: 100%”, wtedy wyśrodkowanie nie jest problemem, ponieważ nie ma wtedy marginesu po lewej lub prawej stronie obiektu.

— Catwoman

0

otwórz, diva następnie włóż

style="width:100% ; margin:0px auto;"

image tag (lub) treść

zamknij div

— Hamd Islam
źródło

0

<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>

— Salil
źródło

0

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.

— Dino
źródło