Wyrównanie tekstu w pionie obok obrazu?

Oto kilka prostych technik dla vertical-align:

One-line vertical-align: middle

To jest proste: 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>

Multiple-lines vertical-align: bottom

Bezwzględnie Ustaw wewnętrzny div względem jego pojemnika

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

Multiple-lines vertical-align: middle

<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ć starożytne wersje IE

Aby to zadziałało poprawnie na całej planszy, będziesz musiał trochę zhakować CSS. Na szczęście jest błąd IE, który działa na naszą korzyść. Ustawienie top:50% na kontenerze i top:-50% na wewnętrznym div, można osiągnąć ten sam wynik. Możemy połączyć te dwa za pomocą innej funkcji 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ść kontenera vertical-align: middle

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

Zastosowanie następujących 3 linii CSS do elementu wyśrodkuje go pionowo wewnątrz elementu nadrzędnego, niezależnie od wysokości elementu nadrzędnego:

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

Zmień swoje div W elastyczny kontener:

div {display:flex;}

Teraz istnieją dwie metody wyśrodkowania wyrównań dla całej zawartości:

Metoda 1:

div {align-items:center;}

DEMO

Metoda 2:

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

DEMO

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 kontenera.

Musisz zastosować vertical-align: middle do obu elementów, 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>

Zaakceptowana odpowiedź Wyśrodkowuje ikonę około połowy wysokości x tekstu obok (zgodnie z definicją w specyfikacji CSS). Co może być wystarczająco dobre, ale może wyglądać trochę nie tak, jeśli tekst ma ascendery lub descendery wyróżniające się tylko na górze lub na dole: {]}

Po lewej, tekst nie jest wyrównany, po prawej jest tak, jak pokazano powyżej. Demo na żywo można znaleźć w tym artykuł o vertical-align.

Czy ktoś mówił, dlaczego vertical-align: top działa w scenariuszu? obrazek w pytaniu jest prawdopodobnie wyższy od tekstu i tym samym określa górną krawędź pola linii. vertical-align: top na elemencie span następnie umieszcza go na górze pola linii.

Główną różnicą w zachowaniu pomiędzy vertical-align: middle i top jest to, że pierwsze przesuwa elementy względem linii bazowej pudełka (która jest umieszczona wszędzie tam, gdzie potrzebne, aby spełnić wszystkie wyrównania pionowe, a tym samym czuje się raczej nieprzewidywalne ) i drugi w stosunku do zewnętrznych granic pola linii (co jest bardziej namacalne).

Technika użyta w zaakceptowanej odpowiedzi działa tylko w przypadku tekstu jednowierszowego ( demo ), ale nie tekstu wielowierszowego (demo ) - Jak tam zaznaczono.

Jeśli ktoś musi wyśrodkować pionowo tekst z wieloma liniami do obrazu, oto kilka sposobów (Metody 1 i 2 zainspirowane TYM artykułem CSS-triki )

Metoda #1: tabele CSS(FIDDLE) (IE8+ (caniuse))

CSS:

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

Metoda #2: Pseudo element 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 # 3: Flexbox (FIDDLE) (caniuse )

CSS (Powyższy tekst zawiera przedrostki vendora):

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

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>

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

Zasadniczo, będziesz musiał zejść do CSS3.

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

Dla przypomnienia, wyrównanie "poleceń" nie powinno działać na SPAN, ponieważ jest to znacznik in-line, a nie znacznik block-level. Rzeczy takie jak wyrównanie, margines, wypełnienie itp.nie będą działać na znaczniku in-line, ponieważ punktem in-line nie jest zakłócanie przepływu tekstu.

CSS dzieli znaczniki HTML na dwie grupy: in-line i block-level. Wyszukaj "css block vs inline" i świetny artykuł pokazuje w górę...

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

(zrozumienie podstawowych zasad CSS jest kluczem do tego, aby nie być tak denerwującym)

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

Użyj line-height:30px dla zakresu, aby tekst był wyrównany z obrazkiem:

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

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

To rozwiązanie działa tylko wtedy, gdy znasz szerokość 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;
}

background:url(../images/red_bullet.jpg) left 3px no-repeat;

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

Zapisz te właściwości span

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

Użyj display:inline-block; Gdy używasz właściwości vertical-align.Są to właściwości assosiated

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

.btn-image {
    vertical-align:middle;
    margin:0 0 3px 0;
}

Możesz ustawić obraz jako inline element używając właściwości display

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

Rozwiązanie wieloliniowe:

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 +

To może być mylące, zgadzam się. Spróbuj skorzystać z funkcji tabeli. Używam tej prostej sztuczki CSS do pozycjonowania modali na środku strony. Posiada duże wsparcie dla 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; }

Zauważ, że musisz stylować i dostosowywać rozmiar kontenera obrazu i tabeli, aby działał tak, jak chcesz. Smacznego.

Po pierwsze inline CSS w ogóle nie jest zalecany, to naprawdę bałagan w HTML.

Aby wyrównać obraz i rozpiętość, 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>

Prawdopodobnie tego chcesz:

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

Jak sugerowali inni, spróbuj vertical-align na obrazku:

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

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