Wyrównać tekst pionowo do obrazu?

Odpowiedzi:

2250

Właściwie w tym przypadku jest to dość proste: zastosuj wyrównanie pionowe do obrazu. Ponieważ wszystko jest w jednym wierszu, naprawdę jest to 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ć Flexboksa dla tego typu układu.

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

Michael Haren
źródło
188
„Ponieważ wszystko jest w jednym wierszu, naprawdę jest to obraz, który chcesz wyrównać, a nie tekst”. - Nie, obraz jest w porządku tam, gdzie jest. Chcemy, aby tekst był wyrównany. Nie obraz. - Rozumiem, że to działa (w niektórych okolicznościach, np. Gdy nie używasz „float: left” na obrazie ...), ale jest to po prostu dziwne i nieintuicyjne, aby fizycznie przenieść tekst do pionowego środka musiałby zamiast tego zastosować atrybut do obrazu obok niego.
BrainSlugs83
35
@ BrainSlug83 Z pewnością nie jest to dziwne, ale widzę, jak mogą się tym poderwać nowicjusze. Domyślnie obraz zostanie umieszczony na linii bazowej tekstu. Wszystko, co robisz, to poruszanie się w miejscu, w którym obraz jest dołączony względem tekstu. Jeśli chodzi o użycie float: left, powinieneś to robić albo na bloku, który zawiera obraz i tekst, albo na samym tekście.
jamesrom
14
@ BrainSlugs83 Zgodził się, że można to postrzegać jako sprzeczne z intuicją. To wymaga trochę mentalnej zmiany, ponieważ zgodnie z CSS, musisz tylko wyśrodkować obraz na tekście. Nie tekst na obrazie.
Greg Pettit
6
Nie działa, jeśli zwiększysz spanrozmiar czcionki. Zobacz moją odpowiedź .
Mori
2
Ale jeśli ustawisz rozmiar obrazu na mniejszy (jak width:16px;height:16px), zobaczysz, że obraz będzie zbyt niski ...
Matthieu Charbonnier
340

Oto kilka prostych technik wyrównywania w pionie:

Jednoliniowe wyrównanie w pionie: środek

Ten jest łatwy: 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>

Wiele linii w pionie: do dołu

Absolutnie umieść wewnętrzny 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>

Wiele linii: wyrównanie w pionie: środek

<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 obsługiwać starsze wersje IE <= 7

Aby wszystko działało poprawnie, musisz nieco zhakować CSS. Na szczęście istnieje błąd IE, który działa na naszą korzyść. Ustawiając top:50%pojemnik i top:-50%wewnętrzny div, możesz osiągnąć ten sam rezultat. Możemy połączyć te dwa elementy za pomocą innej funkcji, której IE nie obsługuje: zaawansowanych selektorów 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: w środku

To rozwiązanie wymaga nieco bardziej nowoczesnej przeglądarki niż inne rozwiązania, ponieważ korzysta z transform: translateYwłaściwości. ( http://caniuse.com/#feat=transforms2d )

Zastosowanie następujących 3 wierszy CSS do elementu spowoduje jego wyśrodkowanie w pionie w obrębie jego elementu nadrzędnego, niezależnie od wysokości elementu nadrzędnego:

position: relative;
top: 50%;
transform: translateY(-50%);
Adam Lassek
źródło
15
display:tableI display:table-cellselektorów CSS działają świetnie, z wyjątkiem, oczywiście, w IE7 i poniżej. Po oderwaniu włosów przez kilka godzin zdecydowałem, że tak naprawdę nie muszę kontaktować się z nikim, kto nadal używa IE7-.
banncee
2
display:tablema pewne ograniczenia w różnych przeglądarkach (w IE11 max-heightnie działa, jeśli element znajduje się w komórce tabeli), więc w niektórych przypadkach krawędzi nie jest dobrym pomysłem wyrównywanie w pionie za pomocą komórek tabeli.
jahu
97

Zmień swój divkontener na elastyczny:

div { display:flex; }


Teraz są 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 imgi różne wartości rozmiaru czcionki na, spana zobaczysz, że zawsze pozostają na środku pojemnika.

Mori
źródło
Aby wyśrodkować tekst obok lub pomiędzy obrazami (poziomo na stronie), trzeba również dodać justify-content: center;i odstępy (bez użycia <br/> znaczników) możesz również dorzucić padding: 1em;. Świetna aktualizacja dla nas współczesnych twórców przeglądarek.
CSS,
To działało dobrze. Próbowałem każdej z pozostałych odpowiedzi i chociaż do pewnego stopnia zadziałały, nie działało to dla mnie. Musiałem wyrównać około 3 wierszy tekstu i ta odpowiedź działała idealnie. Dzięki @Mori
semaj0
87

Musisz zastosować vertical-align: middleoba elementy, aby były idealnie wyśrodkowane.

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

Odpowiedź Zaakceptowany robi Centre ikonę około połowie x wysokość tekstu obok niej (jak określono w specyfikacji CSS ). Co może być wystarczająco dobre, ale może wyglądać nieco nieprzyzwoicie, jeśli tekst ma wznoszenia lub zstępujące elementy wyróżniające się na górze lub na dole:

wyśrodkowane porównanie ikon

Po lewej tekst nie jest wyrównany, po prawej jest jak pokazano powyżej. Demo na żywo można znaleźć w tym artykule na temat wyrównania pionowego .

Czy ktoś mówił o tym, dlaczego vertical-align: topdziała w tym scenariuszu? Obraz w pytaniu jest prawdopodobnie wyższy niż tekst i tym samym określa górną krawędź pola linii. vertical-align: topna elemencie rozpiętości, a następnie po prostu umieszcza go na górze pola linii.

Główna różnica w zachowaniu między vertical-align: middlei toppolega na tym, że pierwsze ruchy elementów odnoszą się do linii bazowej ramki (która jest umieszczana wszędzie tam, gdzie jest to konieczne, aby spełnić wszystkie pionowe wyrównania i dlatego wydaje się raczej nieprzewidywalna ), a druga względem zewnętrznych granic ramki liniowej (która jest bardziej namacalne).

christopheraue
źródło
1
Zauważyłem najlepsze prace i najlepsze prace u dołu, ale nie w środku. Zasadniczo „środek” nie jest zdefiniowany jako środek między górą a dołem. Bardziej oznacza to, że „gdy jest wyższy niż tekst, trzymaj się obu stron jednakowo”. I tutaj nie potrzebujesz wyrównywania w pionie: środek na tekście, tylko obraz.
Curtis
61

Technika zastosowana w zaakceptowanej odpowiedzi działa tylko w przypadku tekstu jednowierszowego ( demo ), ale nie tekstu wielowierszowego ( demo ) - jak tam wspomniano.

Jeśli ktoś chce wyśrodkować tekst wielowierszowy w pionie na obrazie, oto kilka sposobów (Metody 1 i 2 zainspirowane tym artykułem CSS-Tricks )

Metoda nr 1: Tabele CSS ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

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

Metoda nr 2: Pseudoelement na kontenerze ( FIDDLE ) (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 ( FIDDLE ) ( caniuse )

CSS (powyższe skrzypce zawiera prefiksy dostawcy):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}
Danield
źródło
3
Metody działają dobrze, jeśli obraz jest większy (wysokość) niż tekst. Ale jeśli obraz jest mniejszy, wszystkie oprócz ostatniego niestety zawodzą
Thomas
28

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>
HTMLnewBie
źródło
19

Ponieważ musisz ustawić line-heightwysokość div, aby to zadziałało

Ikke
źródło
2
Próbowałem ustawić wysokość linii na 30 pikseli i nadal nie działa.
sam
12

Zasadniczo musisz przejść do CSS3.

-moz-box-align: center;
-webkit-box-align: center;
Dan
źródło
11

Dla przypomnienia, wyrównanie „poleceń” nie powinien pracować na rozpiętości, ponieważ jest to w linii tag, a nie na poziomie bloków tag. Rzeczy takie jak wyrównanie, margines, dopełnianie itp. Nie będą działać na znaczniku wbudowanym, ponieważ punktem wstawiania nie jest zakłócanie przepływu tekstu.

CSS dzieli tagi HTML na dwie grupy: liniową i blokową. Wyszukaj „css block vs inline”, a pojawi się świetny artykuł ...

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

(Zrozumienie podstawowych zasad CSS jest kluczem do tego, aby nie było tak denerwujące)

David
źródło
2
text-aligni vertical-align(z wyjątkiem jego stosowania na tdelementy dla celów starszych) są w szczególności przeznaczone do inlinei inline-blockelementy ( span, imgitp).
Kevin Peno,
11

Użyj line-height:30pxdla zakresu, aby tekst był wyrównany z obrazem:

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>
Touhid Rahman
źródło
11

Inną rzeczą, którą możesz zrobić, to ustawić tekst line-heightna rozmiar obrazów w <div>. Następnie ustaw obrazy navertical-align: middle;

To naprawdę najłatwiejszy sposób.

nullpoint81
źródło
3
Pamiętaj, że nie działa to poprawnie, jeśli treść jest rozłożona na wiele wierszy.
Ahmad Alfy
a dlaczego nie tylko wysokość linii: 100%?
Jean Paul AKA el_vete
8

Nie spotkałem jeszcze rozwiązania z marginżadną z tych odpowiedzi, więc oto moje rozwiązanie tego problemu.

To rozwiązanie działa tylko wtedy, gdy znasz szerokość swojego obrazu.

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}
Fleuv
źródło
1
Oto dokładne rozwiązanie. Działa również w przypadku tekstów wieloliniowych ... Powyższe nie jest odpowiednie dla wielu linii.
efirat
6
background:url(../images/red_bullet.jpg) left 3px no-repeat;

Ogólnie używam 3px zamiast top. Zwiększając / zmniejszając tę ​​wartość, obraz można zmienić na wymaganą wysokość.

AspiringCanadian
źródło
Nie pomaga w sytuacjach, w których rozmiar obrazu jest nieznany lub dynamiczny.
Dan
6

Napisz te właściwości zakresu

span{
    display:inline-block;
    vertical-align:middle;
}

Użyj display:inline-block;Kiedy korzystasz z vertical-alignwłaściwości. Są to właściwości powiązane

Mr.Pandya
źródło
6

Możesz ustawić obraz jako inline elementkorzystający z displaywłaściwości

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

Super użytkownik
źródło
3

Na przykład na przycisku w jQuery mobile możesz go nieco ulepszyć, stosując ten styl do obrazu:

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}
den232
źródło
2

Rozwiązanie wielowierszowe:

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

Działa we wszystkich przeglądarkach i ie9 +

Benjamin Crouzier
źródło
2

Zgadzam się, że może to być mylące. Spróbuj wykorzystać funkcje tabeli. Używam tej prostej sztuczki CSS do pozycjonowania modów na środku strony. Ma duże wsparcie przeglądarki:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

i część CSS:

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

Pamiętaj, że musisz stylizować i dopasować rozmiar obrazu i kontenera tabeli, aby działał tak, jak chcesz. Cieszyć się.

CodeGems
źródło
0

Po pierwsze, wbudowany CSS wcale nie jest zalecany, to naprawdę psuje twój HTML.

Aby wyrównać obraz i zakres, możesz po prostu zrobić vertical-align:middle.

.align-middle {
  vertical-align: middle;
}
<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>

Alireza
źródło
2
Istnieje wiele dobrych powodów, aby używać wbudowanego CSS. React: CSS na przykład w JS .
jlyonsmith
0

Nie jestem pewien, dlaczego nie wyświetla się w przeglądarce nawigacji, ale zwykle używam takiego fragmentu, gdy próbuję wyświetlić nagłówek z obrazem i wyśrodkowanym tekstem, mam nadzieję, że to pomoże!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>
Jean Paul AKA el_vete
źródło
-4

Prawdopodobnie chcesz tego:

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

Jak sugerują inni, spróbuj vertical-alignna obrazku:

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

CSS nie jest denerwujący. Po prostu nie czytasz dokumentacji . ; P

strager
źródło
6
A jeśli wysokość obrazu jest dynamiczna? Jestem wkręcony :( PS, tylko dlatego, że istnieje dokumentacja dla CSS, nie czyni go denerwującym ani nieintuicyjnym.
sam
Masz na myśli nieprzyzwoite i intuicyjne? Nie określiłeś, czy wysokość obrazu jest w ogóle dynamiczna w twoim pytaniu, więc założyłem, że stała wysokość była tym, z czym będziesz się trzymał.
strager
2
Jestem z Samem w tej sprawie. Zakładałem, że przedmioty powinny być wyśrodkowane na jakiejkolwiek wysokości img. Myślę, że wszyscy moglibyśmy się trochę ostygnąć.
Michael Haren