Вертикально вирівняти текст поруч із зображенням?


1966

Чому не вийде vertical-align: middle? І тим НЕ менш, vertical-align: top робить роботу.

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>


12
Ось цікава стаття: Розумінняvertical-align
Федр

Відповіді:


2250

Насправді в цьому випадку це досить просто: застосуйте вертикальне вирівнювання до зображення. Оскільки це все в одному рядку, це дійсно зображення, яке ви хочете вирівняти, а не текст.

<!-- 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>

Перевірено в FF3.

Тепер ви можете використовувати flexbox для цього типу макета.

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


188
"Оскільки це все в одному рядку, це дійсно зображення, яке ви хочете вирівняти, а не текст." - Ні, зображення добре там, де воно є. Ми хочемо, щоб текст вирівнювався. Не зображення. - Я розумію, що це працює (за деяких обставин, наприклад: коли ви не використовуєте "float: left" на зображенні ...), але фізично перемістити текст до вертикальної середини ви просто химерно та неінтуїтивно. доведеться замість цього застосувати атрибут до зображення поруч.
BrainSlugs83

35
@ BrainSlug83 Це, звичайно, не химерно, але я можу бачити, як новоприбулі можуть бути сприйняті цим. За замовчуванням зображення буде розміщене на текстовій базовій лінії. Все, що ви робите, - це переміщення там, де зображення прикріплене відносно тексту. Що стосується використання float: зліва, ви повинні робити це або на блоці, що містить зображення та текст, або на самому тексті.
jamesrom

14
@ BrainSlugs83 погодився, що це можна розглядати як контрінтуїтивне. Це потребує певного розумового зрушення, тому що, відповідно до CSS, те, що вам потрібно зробити, - це зосередження зображення на тексті. Не текст до зображення.
Грег Петтіт

6
Це не працює, якщо збільшити spanрозмір шрифту. Дивіться мою відповідь .
Морі

2
Але якщо встановити розмір зображення на менший (як width:16px;height:16px), ви побачите, що зображення буде занадто низьким ...
Матьє Шарбоньє

340

Ось кілька простих прийомів вертикального вирівнювання:

Однорядкова вертикальна вирівнювання: середня

Це легко: встановіть висоту рядка текстового елемента рівну доріжці контейнера

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

Багаторядкові вертикальні вирівнювання: низ

Абсолютно розташуйте внутрішній діл відносно контейнера

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

Багаторядкові вертикальні вирівнювання: середній

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

Якщо ви повинні підтримувати старовинні версії IE <= 7

Для того, щоб це нормально працювало, вам доведеться трохи зламати CSS. На щастя, є помилка IE, яка працює на нашу користь. Встановивши top:50%на контейнер і top:-50%на внутрішню діву, ви можете досягти однакового результату. Ми можемо поєднати ці два за допомогою іншої функції, яку IE не підтримує: розширені селектори 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>

Змінна висота контейнера по вертикалі: середня

Для цього рішення потрібен трохи більш сучасний браузер, ніж інші рішення, оскільки він використовує transform: translateYвластивість. ( http://caniuse.com/#feat=transforms2d )

Якщо застосувати наступні 3 рядки CSS до елемента, він буде вертикально розташований в його батьківському місці, незалежно від висоти батьківського елемента:

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

15
display:tableІ display:table-cellCSS селектори працюють відмінно, за винятком, звичайно, в IE7 і нижче. Вирвавши волосся протягом декількох годин, я вирішив, що мені не потрібно мати справу з тим, хто все ще використовував IE7-.
banncee

2
display:tableмає деякі обмеження в різних браузерах (в IE11 max-heightне працює, якщо елемент знаходиться всередині комірки таблиці), тому в деяких крайніх випадках не годиться вирівнювати вертикально за допомогою комірок таблиці.
jahu

97

Змініть свій divна контейнер flex:

div { display:flex; }


Зараз є два способи центрувати вирівнювання для всього вмісту:

Спосіб 1:

div { align-items:center; }

DEMO


Спосіб 2:

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

DEMO


Спробуйте різні значення ширини та висоти для imgта різних значень розміру шрифту на spanі ви побачите, що вони завжди залишаються в середині контейнера.


Щоб центрувати текст поруч із зображеннями або між ними (по горизонталі на сторінці), потрібно також додати justify-content: center;і для інтервалу (без використання тегів <br/>), який ви також можете вписати у padding: 1em;. Чудове оновлення для нас сучасних розробників браузера.
CSS

Це добре спрацювало. Я спробував відповіді всіх інших, і хоча вони до певної міри працювали, мені це не вийшло. У мене було близько 3 рядків тексту для вирівнювання, і ця відповідь спрацювала чудово. Дякую @Mori
semaj0

87

Ви повинні застосувати vertical-align: middleобидва елементи, щоб це було ідеально по центру.

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

Загальноприйнятий відповідь робить відцентрувати значок близько половини х висоти тексту поруч з ним (як визначено в CSS специфікації ). Що може бути досить гарним, але може трохи відшаровуватися, якщо текст має висхідні або спадні лінії, що виділяються просто вгорі або внизу:

по центру зіставлення піктограм

Зліва текст не вирівнюється, праворуч - як показано вище. Демонстраційну демонстрацію можна знайти в цій статті про вертикальне вирівнювання .

Хтось говорив про те, чому vertical-align: topпрацює сценарій? Зображення у питанні, ймовірно, вище за текст і, таким чином, визначає верхній край поля рядка. vertical-align: topна прольотному елементі, потім просто розміщуєте його у верхній частині рядка.

Основна відмінність поведінки між vertical-align: middleі topполягає в тому, що перший переміщує елементи відносно базової лінії коробки (який розміщується там, де потрібно, щоб виконати всі вертикальні вирівнювання і, таким чином, відчуває себе досить непередбачуваним ), а другий відносно зовнішніх меж рядка (який є більш відчутний).


1
Я помітив верхній і нижній роботи, але не середній. В основному "середина" не визначається як половина між верхом і низом. Це більше означає, "коли він вище тексту, дотримуйтесь обох способів однаково". І тут вам не потрібно вертикальне вирівнювання: середина тексту взагалі, лише зображення.
Кертіс

61

Техніка, що використовується у прийнятій відповіді, працює лише для односкладного тексту ( демонстрації ), але не для багаторядкового тексту ( демонстрації ) - як зазначено там.

Якщо комусь потрібно вертикально центрувати багаторівневий текст до зображення, ось декілька способів (Методи 1 та 2, натхненні цією статтею CSS-трюки )

Спосіб №1: таблиці CSS ( FIDDLE ) (IE8 + ( канюза ))

CSS:

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

Спосіб №2: Псевдоелемент на контейнері ( 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 */
}

Спосіб №3: Flexbox ( FIDDLE ) ( канюза )

CSS (вищезазначена скрипка містить префікси постачальника):

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

3
Методи добре працюють, якщо зображення більше (у висоту), ніж текст. Але якщо зображення менше, ніж усі, окрім останнього, на жаль, не виходить
Томас

28

Цей код працює в IE, а також FF:

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

19

Тому що для цього потрібно встановити line-heightвисоту діва


2
Я спробував встановити висоту лінії до 30 пікселів, і вона все ще не працює.
сам

12

В основному, вам доведеться перейти до CSS3.

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

11

Для запису вирівнювання "команди" не повинно працювати на SPAN, оскільки це вбудований тег, а не тег рівня на рівні блоку . Такі речі, як вирівнювання, поле, прокладка тощо, не працюватимуть на вбудованому тезі, оскільки точка вставки не полягає в порушенні потоку тексту.

CSS розділяє теги HTML на дві групи: рядок та рівень блоку. Пошук "css block vs inline" і чудова стаття показує ...

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

(Розуміння основних принципів CSS є ключовим для того, щоб воно не було настільки дратує)


2
text-alignі vertical-align(за винятком його застосування на tdелементи для застарілих цілей), спеціально призначені для inlineі inline-blockелементів ( span, img, і т.д.).
Кевін Пено

11

Використовуйте line-height:30pxдля проміжку, щоб текст вирівнювався із зображенням:

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

11

Ще одна річ, яку ви можете зробити, це встановити текст line-heightза розміром зображень у межах <div>. Потім встановіть зображення наvertical-align: middle;

Це серйозно найпростіший спосіб.


3
Зауважте, що це працює неправильно, якщо ваш вміст розповсюджується на кілька рядків.
Ахмад Альфі

а тоді чому б не просто висота лінії: 100%?
Жан Пол АКА el_vete

8

Я ще не бачив вирішення marginжодної з цих відповідей, тому ось моє рішення цієї проблеми.

Це рішення працює лише в тому випадку, якщо ви знаєте ширину зображення.

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

1
Ось точне рішення. Він також працює для багаторядкових текстів ... Aboves не є належним для декількох рядків.
ефірат

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

Зазвичай я використовую 3px замість top. Збільшуючи / зменшуючи це значення, зображення можна змінити на потрібну висоту.


Не допомагає в ситуаціях, коли розмір зображення невідомий або динамічний.
Дан

6

Запишіть ці властивості інтервалу

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

Використовуйте, display:inline-block;коли ви використовуєте vertical-alignвластивість. Ці властивості асоційовані


6

Ви можете встановити зображення як inline elementвикористання displayвластивості

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


3

Наприклад, на кнопці в jQuery mobile, ви можете трохи її підправити, застосувавши цей стиль до зображення:

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

2

Багатолінійне рішення:

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

Працює у всіх броуерах і ie9 +


2

Це може бути заплутано, я згоден. Спробуйте використовувати функції таблиці. Я використовую цей простий фокус CSS, щоб розташувати модалі в центрі веб-сторінки. Він має велику підтримку браузера:

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

і частина CSS:

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

Зауважте, що ви повинні стилізувати та коригувати розмір контейнера зображення та таблиці, щоб він працював так, як вам завгодно. Насолоджуйтесь.


0

По-перше, вбудований CSS взагалі не рекомендується, він дійсно зіпсує ваш HTML.

Для вирівнювання зображення та діапазону можна просто зробити 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>


2
Існує багато вагомих причин використовувати вбудований CSS. Реакція: CSS в JS, наприклад.
jlyonsmith

0

Не впевнений, чому він не відображає його у веб-переглядачі вашої навігації, але я зазвичай використовую такий фрагмент, коли намагаюся відобразити заголовок із зображенням та зосередженим текстом, сподіваюся, що це допоможе!

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>

-4

Ви, мабуть, хочете цього:

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

Як запропонували інші, спробуйте vertical-alignзображення:

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

CSS не дратує. Ви просто не читаєте документацію . ; P


6
А якщо висота зображення динамічна? Мене накрутили :( PS, тому що документація, що існує для CSS, не робить її дратівливою чи неінтуїтивною.
Сем

Ви маєте на увазі дратівливу та інтуїтивну? Ви не вказали, чи висота зображення у нього взагалі динамічна у вашому запитанні, тому я припустив, що фіксовану висоту ви будете дотримуватися.
страгер

2
Я з цим на цьому. Я припускав, що елементи повинні бути зосереджені з будь-якою висотою зображення. Я думаю, ми могли б всі стояти, щоб трохи охолонути.
Майкл Харен
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.