Питання Вертикально вирівняти текст біля зображення?


Чому не буде vertical-align: middle робота І все-таки vertical-align: top  робить робота

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

1685
2018-01-28 21:01


походження


Ось цікава стаття: Розуміння vertical-align - Phaedrus
Звичайно, не вдається вступити і захищати CSS з мовної точки зору, але багато моїх розчарування полягає в тому, що лише певні функції працюють залежно від браузера, в якому ви знаходитесь. Навіть сьогодні, коли сучасні "браузерні війни" більше про тих, хто найкраще дотримується стандартів, існує багато застережень, і дійсно обмежує список можливостей. - Mattygabe
Єресь: <td> img </ td> <td valign = "middle"> text </ td> - T4NK3R
648+ люди думають, що я божевільний, але прийнята відповідь не спрацювала для мене. Однак це ... <div> <img style = "width: 30px; height: 60px; vertical-align: middle"> <span style = "height: 60px; vertical-align: middle"> Works. </ Span > </ div> - Zach


Відповіді:


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

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


1901
2018-01-28 21:10



Протестовано в IE 6 та 7. Працює задоволення. - Ben
"Оскільки це все в одному рядку, це дійсно зображення, яке ви хочете вирівняти, а не текст". - Ні, зображення добре, де він знаходиться. Ми хочемо вирівняти текст. Не зображення. - Я дізнаюсь, що це працює (за деяких обставин, наприклад: коли ви не використовуєте зображення "float: left" ...), але це просто химерно і незвично, щоб фізично перемістити текст у вертикальну середу замість цього слід застосувати атрибут до зображення поруч із ним. - BrainSlugs83
@ BrainSlug83 Це, звичайно, не химерно, але я бачу, як це може завадити новим людям. За замовчуванням зображення буде розміщено на базовому сценарії тексту. Все, що ви робите, рухається там, де зображення додається до тексту. Що стосується використання плаваючого: зліва, ви повинні робити це або на блоці, який містить зображення та текст, або сам текст. - jamesrom
@ BrainSlugs83 Погоджено, що це можна розглядати як контр-інтуїтивно. Це вимагає трохи інтелектуального зсуву, тому що відповідно до CSS, що вам потрібно зробити, це спрямувати зображення до тексту. Не текст на зображення. - Greg Pettit
Це не спрацьовує, якщо збільшити span розмір шрифту. Побачити моя відповідь. - Mori


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

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

Це легко: встановити лінійно-висоту текстового елемента рівним вмісту контейнера

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

317
2018-01-28 21:45



The display:table і display:table-cell CSS-селектори працюють чудово, за винятком, звичайно, в IE7 та нижче. Після декількох годин розірвавши волосся, я вирішив, що я не маю справу з тими, хто все ще використовує IE7. - banncee
display:table має деякі обмеження в різних браузерах (в IE11 max-height не працює, якщо елемент знаходиться всередині комірки таблиці), тому в деяких ребрах не рекомендується правильно вирівнювати з допомогою комірок таблиці. - jahu
Нехай Internet Explorer відійде в мир - Ĭsααc tիε βöss


Змініть свій div в гнучкий контейнер:

div {display:flex;}


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

Метод 1:

div {align-items:center;}

DEMO 


Метод 2:

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

DEMO 


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


79
2018-03-24 07:54



Це чудово працювало в Firefox! ... але, здається, не працює в Chrome (використовуючи версію 42) - Chris
Він працює в останній версії Chrome, 42.0.2311.90 м без проблем. - Mori
найпростіший спосіб, який працює з різними розмірами шрифту - woojoo666
Щоб орієнтувати текст поруч із зображеннями або між ними (горизонтально на сторінці), потрібно також додати justify-content: center; і для інтервалу (без використання <br/> тегів) ви також можете захотіти вставити в padding: 1em;. Велике оновлення для наших сучасних браузерів. - CSS
Дякую. З будь-якої причини, це єдина відповідь (з цього, і вище, вище), яка працювала для мене. - inspirednz


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

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

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

centered icon comparison

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

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

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


68
2017-09-11 12:58



Насправді ця відповідь дійсно допомогла мені, незважаючи на величезну кількість прийнятої відповіді. Танкс! - Bernoulli IT
Це дійсно чудова відповідь. Я завжди вважав, що проблема з незначною частиною вертикального центру дійсно не могла бути вирішена без обману. - Brad
Я згоден, ця відповідь була чистою та легкою, і працювала. Він також не покладається на непослідовно підтримуваний css3 і т. Д. - Lizardx
Це добре працює з різними розмірами шрифту. - Robert Moore
Я помітив верхні роботи та нижні роботи, але не середні. В основному "середній" не визначається як на півдорозі між верхньою та нижньою. Це означає, що "коли він вище тексту, в одному і тому ж стилі". І тут вам не потрібна вертикальна вирівнювання: взагалі середній текст, просто зображення. - Curtis


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

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

Метод №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 */
}

47
2017-12-24 21:06



Метод №1 чудово працює! У мене було 2 діви - у одного є текст - інше - зображення. І тепер вони обидва вертикально орієнтовані. І дуже легко. Перевірено в FF34.0.5 та IE8. Дякую. - Ernestas Gruodis
Методи відмінно працюють, якщо зображення більше (у висоту), ніж текст. Але якщо зображення менше, то все, крім останнього, на жаль, не вдається - Thomas


Цей код працює в IE та 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



Хіба це не та сама відповідь, як та, що була дана в 2009 році і яку тоді було прийнято як правильне? - Mr Lister
Так ... але з невеликою зміною "авто", щоб уникнути жорсткого кодування - HTMLnewBie


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


16
2018-01-28 21:05



І все-таки, роблячи це в таблицях, можна було б досягти за допомогою "vertical-align: center". CSS дует. - sam
Я намагався встановити лінію-висоту до 30 пікселів, і вона все одно не працює. - sam


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

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

9
2017-11-29 18:24





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

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

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

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


8
2017-11-18 13:24



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


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

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


8
2018-01-12 14:52



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