vertical-align image in div [duplicate]

Question

vertical-align image in div [duplicate]

to pytanie ma już odpowiedzi tutaj : Jak wyrównać obraz w pionie wewnątrz div (36 odpowiedzi) Zamknięty 4 lata temu .

Mam problem z obrazkiem vertical-align 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;", aby umieścić obraz w centrum i to działa. Również w tutorialach znajduję wiele odpowiedzi, ale nie są one "przydatne", ponieważ wszystkie moje obrazy nie są na tej samej wysokości!

61

image css vertical-alignment

Author: aainaarz, 2012-04-04

Source

3 answers

Stare pytanie, ale obecnie CSS3 sprawia, że wyrównanie pionowe jest naprawdę proste!

Wystarczy dodać do <div> Ten 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>

33

Author: Jaqen H'ghar,
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-06-23 19:54:22

Nie musisz definiować pozycjonowania, gdy potrzebujesz vertical align center dla elementów inline i block, możesz skorzystać z poniższego pomysłu: -

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/

4

Author: Shailender Arora,
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
2012-04-04 10:34:49

score 139 · Accepted Answer

Jeśli masz stałą wysokość w kontenerze, możesz ustawić wysokość linii na taką samą jak wysokość, a będzie ona wyśrodkowana pionowo. Następnie po prostu dodaj tekst-Wyrównaj do środka poziomo.

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

EDIT

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 będą zawsze wyśrodkowane poziomo i pionowo, bez względu na ich rozmiar. Oto 2 więcej przykładów z obrazami z różnych Wymiary:

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

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

UPDATE

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

W 2014 roku, Microsoft ogłosił , że przestanie wspierać IE8 we wszystkich wersjach systemu Windows i zachęci wszystkich użytkowników do aktualizacji do IE11 lub Edge. Cóż, to ma się stać w najbliższy wtorek (12th Stycznia).

Dlaczego to ma znaczenie? Wraz z ogłoszoną śmiercią IE8, możemy wreszcie zacząć używać magii CSS3 .

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%);
}

Używając tej metody transform: translate();, nie musisz nawet mieć stałej wysokości w kontenerze, jest ona w pełni dynamiczna . Twój element ma stałą wysokość czy szerokość? Twój pojemnik też? Nie? Nieważne, zawsze będzie wyśrodkowane ponieważ wszystkie właściwości wyśrodkowania są ustalone na dziecku, jest ono niezależne od rodzica. Dziękuję CSS3.

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

Tutaj, masz nowe skrzypce: https://jsfiddle.net/Cthulhu/1xjbhsr4/

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

Szczęśliwego kodowania.