Pytanie Wyrównać w pionie tekst obok obrazu?


Dlaczego nie vertical-align: middle praca? I jeszcze, vertical-align: top  robi praca.

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

1686
2018-01-28 21:01


pochodzenie


Oto ciekawy artykuł: Zrozumienie vertical-align - Phaedrus
Z pewnością nie mogę wkroczyć i bronić CSS z punktu widzenia języka, ale wiele z mojej frustracji wynika z faktu, że tylko niektóre funkcje działają w zależności od przeglądarki, w której się znajdujesz. Nawet dzisiaj, kiedy współczesne "wojny przeglądarek" są więcej o tym, kto najlepiej przestrzega standardów, wciąż istnieją obawy i naprawdę ogranicza listę funkcji. - Mattygabe
Herezja: <td> img </ td> <td valign = "middle"> text </ td> - T4NK3R
648+ osób pomyśli, że jestem szalona, ​​ale zaakceptowana odpowiedź nie działa dla mnie. Jednak to ... <div> <img style = "width: 30px; height: 60px; vertical-align: middle"> <span style = "height: 60px; vertical-align: middle"> Works. </ Span > </ div> - Zach


Odpowiedzi:


Właściwie w tym przypadku jest to całkiem proste: zastosuj pionowe wyrównanie do obrazu. Ponieważ wszystko jest w jednym wierszu, to naprawdę obraz, który chcesz wyrównać, a nie tekst.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

Testowane w FF3.

Teraz możesz używać Flexbox do tego typu układu.

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://placehold.it/60x60">
    <span style="">Works.</span>
</div>


1902
2018-01-28 21:10



Testowane w IE 6 i 7. Działa jak smakołyk. - Ben
"Ponieważ wszystko jest w jednej linii, to naprawdę obraz, który chcesz wyrównać, a nie tekst." - Nie, obraz jest w porządku, gdzie jest. Chcemy, aby tekst był wyrównany. Nie obraz. - Rozumiem, że to działa (w pewnych okolicznościach, np. Kiedy nie używasz "float: left" na obrazie ...), ale jest to po prostu dziwne i nieintuicyjne, że aby fizycznie przesunąć tekst do pionu w środku, musiałby zamiast tego zastosować atrybut do obrazu obok. - BrainSlugs83
@ BrainSlug83 Z pewnością nie jest to dziwne, ale widzę, w jaki sposób można się tym zająć. Domyślnie obraz zostanie umieszczony na linii bazowej tekstu. Wszystko, co robisz, to poruszanie się, gdzie obraz jest dołączony do tekstu. Jeśli chodzi o użycie float: left, powinieneś to zrobić albo na bloku, który zawiera obraz i tekst, albo na samym tekście. - jamesrom
@ BrainSlugs83 Uzgodniono, że może to być postrzegane jako sprzeczne z intuicją. To wymaga nieco zmiany mentalnej, ponieważ zgodnie z CSS, musisz wycentrować obraz do tekstu. Nie tekst do obrazu. - Greg Pettit
To nie działa, jeśli zwiększysz wartość span rozmiar czcionki. Widzieć moja odpowiedź. - Mori


Oto kilka prostych technik wyrównywania w pionie:

Jednokresowe wyrównanie pionowe: środkowe

Ta jest łatwa: ustaw wysokość linii elementu tekstowego na równą wysokości kontenera

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Wielokreskowe wyrównanie w pionie: u dołu

Całkowicie ustaw wewnętrzny element div względem jego kontenera

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Wielokreskowe wyrównanie w pionie: środkowe

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

Jeśli musisz wspierać starsze wersje IE <= 7

Aby to wszystko działało poprawnie, musisz trochę zhackować CSS. Na szczęście istnieje błąd IE, który działa na naszą korzyść. Oprawa top:50% na pojemniku i top:-50% na wewnętrznej div, można osiągnąć ten sam wynik. Możemy połączyć te dwie funkcje za pomocą innej funkcji, której program IE nie obsługuje: zaawansowane selektory CSS.

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

Zmienna wysokość pojemnika w pionie-wyrównanie: w środku

To rozwiązanie wymaga nieco bardziej nowoczesnej przeglądarki niż inne rozwiązania, ponieważ korzysta z niej transform: translateY własność. (http://caniuse.com/#feat=transforms2d)

Zastosowanie następujących 3 linii CSS do elementu spowoduje pionowe wyśrodkowanie go w obrębie obiektu nadrzędnego, bez względu na wysokość elementu nadrzędnego:

position: relative;
top: 50%;
transform: translateY(-50%);

317
2018-01-28 21:45



The display:table i display:table-cell Selektory CSS działają świetnie, z wyjątkiem oczywiście w IE7 i poniżej. Po kilkugodzinnych rozbieraniu włosów postanowiłem, że tak naprawdę nie muszę zajmować się nikim, kto nadal używa IE7-. - banncee
display:table ma pewne ograniczenia w różnych przeglądarkach (w IE11 max-height nie działa, jeśli element znajduje się w komórce tabeli), więc w niektórych przypadkach nie jest dobrym rozwiązaniem wyrównanie w pionie przy użyciu komórek tabeli. - jahu
Pozwól Internet Explorerzowi ZATRZYMAĆ W POKÓJ - Ĭsααc tիε βöss


Zmień swoje div w elastyczny pojemnik:

div {display:flex;}


Teraz istnieją dwie metody wyśrodkowania linii trasowania dla całej zawartości:

Metoda 1:

div {align-items:center;}

PRÓBNY 


Metoda 2:

div * {margin-top:auto; margin-bottom:auto;}

PRÓBNY 


Wypróbuj różne wartości szerokości i wysokości na img i różne wartości rozmiaru czcionki na span a zobaczysz, że zawsze pozostają w środku pojemnika.


79
2018-03-24 07:54



To zadziałało dla mnie świetnie w Firefoksie! ... ale wygląda na to, że nie działa w Chrome (w wersji 42) - Chris
Działa w najnowszej wersji Chrome, 42.0.2311.90 m, bez problemu. - Mori
najprostszy sposób, który działa z różnymi rozmiarami czcionek - woojoo666
Aby wyśrodkować tekst obok lub pomiędzy obrazami (poziomo na stronie), musisz również dodać justify-content: center; i dla odstępów (bez użycia znaczników <br/>) możesz również rzucić padding: 1em;. Świetna aktualizacja dla nas nowoczesnych przeglądarek. - CSS
Dziękuję Ci. Z jakiegokolwiek powodu jest to jedyna odpowiedź (z tego i tych powyżej), która sprawdziła się u mnie. - inspirednz


Musisz się zgłosić vertical-align: middle do obu elementów, aby idealnie je wyśrodkować.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

The zaakceptowana odpowiedź wyśrodkowuje ikonę wokół połowy wysokości x tekstu obok (zgodnie z definicją w Specyfikacja CSS). Co może być wystarczająco dobre, ale może wyglądać trochę, jeśli tekst ma wznoszące się lub dolne linie wyróżniające się na samej górze lub na dole:

centered icon comparison

Po lewej tekst nie jest wyrównany, po prawej jest tak, jak pokazano powyżej. Można w nim znaleźć demo na żywo artykuł o wyrównaniu w pionie.

Czy ktoś mówił o tym, dlaczego? vertical-align: top działa w scenariuszu? Obraz w pytaniu jest prawdopodobnie wyższy od tekstu i tym samym określa górną krawędź pola liniowego. vertical-align: top na elemencie przęsła, po prostu umieszcza go w górnej części pola liniowego.

Główna różnica w zachowaniu między vertical-align: middle i top jest to, że pierwsze elementy poruszają się względem linii bazowej pudełka (która jest umieszczana wszędzie tam, gdzie jest potrzebna do wypełnienia wszystkich pionowych linii trasowania, a zatem czuje się raczej nieobliczalny) a drugi w stosunku do zewnętrznych granic pola liniowego (który jest bardziej namacalny).


68
2017-09-11 12:58



Właściwie ta odpowiedź naprawdę mi pomogła, pomimo mega-upvote przyjętej odpowiedzi. Thanx! - Bernoulli IT
To naprawdę jest doskonała odpowiedź. Zawsze zakładałem, że problem z niewielkim punktem pionowego centrum nie może zostać rozwiązany bez oszustwa. - Brad
Zgadzam się, ta odpowiedź była czysta i łatwa i zadziałała. Nie opiera się też na niekonsekwentnie obsługiwanych css3 itp. - Lizardx
Działa to dobrze w przypadku różnych rozmiarów czcionek. - Robert Moore
Zauważyłem najlepsze prace i prace na dole, ale nie na środku. Zasadniczo "środkowy" nie jest zdefiniowany jako w połowie drogi między górą a dołem. Oznacza bardziej "kiedy jest wyższy niż tekst, wystaje w obie strony jednakowo". I tutaj nie potrzebujesz wyrównywania w pionie: na środku tekstu, tylko na obrazku. - Curtis


Technika zastosowana w przyjętej odpowiedzi działa tylko w przypadku tekstu jednolinijkowego (próbny), ale nie tekst wielowierszowy (próbny) - jak zaznaczono.

Jeśli ktoś musi w pionie wyśrodkować tekst wieloliniowy na obrazie, oto kilka sposobów (Metody 1 i 2 inspirowane przez ten artykuł CSS-Tricks)

Metoda nr 1: tabele CSS (SKRZYPCE) (IE8 + (mogę uzyć))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

Metoda # 2: Pseudo element na kontenerze (SKRZYPCE) (IE8 +)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

Metoda nr 3: Flexbox (SKRZYPCE) (mogę uzyć)

CSS (Powyższe skrzypce zawiera przedrostki dostawców):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

47
2017-12-24 21:06



Metoda # 1 działa znakomicie! Miałem 2 divy - jeden ma tekst - inny - obraz. A teraz oba są pionowo wyśrodkowane. I bardzo łatwe. Testowane w FF34.0.5 i IE8. Wielkie dzięki. - Ernestas Gruodis
Metody działają dobrze, jeśli obraz jest większy (w pionie) niż tekst. Ale jeśli obraz jest mniejszy, wszystkie, oprócz ostatniego, niestety zawodzą - Thomas


Ten kod działa zarówno w IE, jak i FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

23
2017-07-02 14:41



Czy nie jest to ta sama odpowiedź, co ta, która została podana w 2009 roku i została wtedy przyjęta jako poprawna? - Mr Lister
Tak ... ale z niewielką zmianą "auto", aby uniknąć twardego kodowania - HTMLnewBie


Ponieważ musisz ustawić line-height do wysokości div, aby działało


16
2018-01-28 21:05



A jednak wykonanie tego w tabelach byłoby możliwe dzięki "vertical-align: center". CSS wieje. - sam
Próbowałem ustawić wysokość linii na 30 pikseli i nadal nie działa. - sam


Zasadniczo musisz przejść do CSS3.

-moz-box-align: center;
-webkit-box-align: center;

9
2017-11-29 18:24





Dla rekordu "polecenia" wyrównania nie powinny działać na SPAN, ponieważ jest to w linii tag, nie a poziom blokowy etykietka. Rzeczy takie jak wyrównanie, margines, dopełnienie itp. Nie będą działały na tagu w linii, ponieważ punktem wstawiania nie jest zakłócenie przepływu tekstu.

CSS dzieli tagi HTML na dwie grupy: in-line i block-level. Wyszukaj "css block vs inline" i pojawi się świetny artykuł ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(Zrozumienie podstawowych zasad CSS jest kluczem do tego, że nie jest tak denerwujące)


8
2017-11-18 13:24



text-align i vertical-align (z wyjątkiem jego wniosku o td elementy do starszych celów) są specjalnie przeznaczone dla inline i inline-block elementy (span, imgitp.). - Kevin Peno


Kolejną rzeczą, którą możesz zrobić, to ustawić tekst line-height do rozmiaru obrazów w obrębie <div>. Następnie ustaw obrazy na vertical-align: middle;

To naprawdę najłatwiejszy sposób.


8
2018-01-12 14:52



Pamiętaj, że to nie działa poprawnie, jeśli Twoja treść jest rozłożona na wiele linii. - Ahmad Alfy


Posługiwać się line-height:30px dla zakresu, aby tekst był zgodny z obrazem:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

7
2018-05-20 23:50