Pytanie w sprawie image, vertical-alignment, css – vertical-align image in div [duplicate]

58

To pytanie ma już odpowiedź tutaj:

Jak wyrównać obraz w pionie wewnątrz div? 34 odpowiedzi

Mam problem z wyrównywaniem obrazu w pionie w div

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}

.img_thumb img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

<div class="img_thumb">
    <a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a>
</div>

O ile wiem, potrzebuję „display: block;” do pozycjonowania obrazu na środku i to działa. Również w samouczkach znajduję wiele odpowiedzi, ale nie są one „przydatne”, ponieważ wszystkie moje obrazy NIE są na tej samej wysokości!

Twoja odpowiedź

3   odpowiedź
132

możesz ustawić wysokość linii tak, aby była taka sama jak wysokość, i będzie ona wyśrodkowana w pionie. Następnie po prostu dodaj wyrównywanie tekstu do środka w poziomie.

Oto przykład:http: //jsfiddle.net/Cthulhu/QHEnL/1

EDYTOWA

Twój kod powinien wyglądać tak:

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height:120px;
    text-align:center;
}

.img_thumb img {
    vertical-align: middle;
}

Obrazy zawsze będą wyśrodkowane poziomo i pionowo, bez względu na ich rozmiar. Oto 2 kolejne przykłady z obrazami o różnych wymiarach:

http: //jsfiddle.net/Cthulhu/QHEnL/6

http: //jsfiddle.net/Cthulhu/QHEnL/7

AKTUALIZACJ

Teraz jest 2016 (przyszłość!) I wygląda na to, że kilka rzeczy się zmienia (w końcu !!).

Powrót w 2014 r.,Microsoft ogłosił przestanie obsługiwać IE8 we wszystkich wersjach systemu Windows i zachęci wszystkich użytkowników do aktualizacji do IE11 lub Edge. Powinno to nastąpić w najbliższy wtorek (12 stycznia).

Dlaczego to ma znaczenie? Z ogłoszonymdeath of IE8 możemy wreszcie zacząć używać CSS3 magia

Mając to na uwadze, oto zaktualizowany sposób wyrównywania elementów, zarówno w poziomie, jak i w pionie:

.container {
    position: relative;
}

.container .element {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

Korzystanie z tegotransform: translate(); metoda, nie musisz nawet mieć ustalonej wysokości w pojemniku, jest w pełni dynamiczny. Twój element ma stałą wysokość lub szerokość? Twój pojemnik też? Nie? To nie ma znaczenia, zawsze będzie wyśrodkowane, ponieważ wszystkie właściwości centrujące są ustalone na dziecku, jest to niezależne od rodzica. Dziękuję CSS3.

Jeśli potrzebujesz wyśrodkować tylko w jednym wymiarze, możesz użyćtranslateY lubtranslateX. Po prostu spróbuj przez chwilę, a zobaczysz, jak to działa. Spróbuj także zmienić wartościtranslate, przyda ci się w wielu różnych sytuacjach.

Oto nowy skrzypce:https: //jsfiddle.net/Cthulhu/1xjbhsr4

Aby uzyskać więcej informacji na temattransform, oto dobry zasób.

Happy coding.

Aktualizacja tej odpowiedzi 2016 jest złota! ;) chrisv
Dziękuję za aktualizację odpowiedzi od 2016 roku. Działa jak urok !!! Phuong Nguyen
Ta aktualizacja była sprzęgłem! TY !! Sensei James
Odpowiedź Cthulhu jest prawidłowa, ale jeśli sprawdzisz piksele ponad i po obrazie, zauważysz, że div ma irytujące wypełnienie 3 pikseli (zależy to od rozmiaru czcionki). Aby się go pozbyć, po prostu dodaj rozmiar czcionki: 0; do div. ragnar
To wydawało się takie proste rozwiązanie, ale nie udało mi się go uruchomić. Po wyodrębnieniu każdej części mojego szablonu WordPress doszedłem do wniosku, że problem stanowi mój typ dokumentu. Przełączono z 4.0 Przejściowy na typ HTML5 i to zadziałało! Mam nadzieję, że pomoże to innym osobom mającym ten sam problem user1380540
23

dzisia CSS3 sprawia, że wyrównanie pionowe jest naprawdęprosty

Wystarczy dodać do<div> this css:

display:flex;
align-items:center;
justify-content:center;

JSFiddle demo

Przykład na żywo:

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    display:flex;
    align-items:center;
    justify-content:center;
}
<div class="img_thumb">
    <a class="images_class" href="http://i.imgur.com/2FMLuSn.jpg" rel="images">
       <img src="http://i.imgur.com/2FMLuSn.jpg" title="img_title" alt="img_alt" />
    </a>
</div>

@ MarksCode jest już kompatybilny ze wszystkimi nowoczesnymi przeglądarkami (IE11 +) patrzMogę uzy. Działa również w IE10 zprefiksowana wersja Jaqen H'ghar
Miło, czy powinienem bać się korzystać z tego, jeśli jest naprawdę nowy? MarksCode
3

gdy potrzebujesz pionowego środka wyrównywania dla elementów śródliniowych i blokowych, które możesz wziąć pod uwagę poniżej: -

inline-elements :- <img style="vertical-align:middle" ...>
                   <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>  

block-elements :- <td style="vertical-align:middle"> ... </td>
                  <div style="display:table-cell; vertical-align:middle"> ... </div>

Zobacz demo: -http: //jsfiddle.net/Ewfkk/2

Powiązane pytania