Чому не вийде 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>
Чому не вийде 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>
Відповіді:
Насправді в цьому випадку це досить просто: застосуйте вертикальне вирівнювання до зображення. Оскільки це все в одному рядку, це дійсно зображення, яке ви хочете вирівняти, а не текст.
<!-- 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>
span
розмір шрифту. Дивіться мою відповідь .
width:16px;height:16px
), ви побачите, що зображення буде занадто низьким ...
Ось кілька простих прийомів вертикального вирівнювання:
Це легко: встановіть висоту рядка текстового елемента рівну доріжці контейнера
<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>
Для того, щоб це нормально працювало, вам доведеться трохи зламати 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%);
display:table
І display:table-cell
CSS селектори працюють відмінно, за винятком, звичайно, в IE7 і нижче. Вирвавши волосся протягом декількох годин, я вирішив, що мені не потрібно мати справу з тим, хто все ще використовував IE7-.
display:table
має деякі обмеження в різних браузерах (в IE11 max-height
не працює, якщо елемент знаходиться всередині комірки таблиці), тому в деяких крайніх випадках не годиться вирівнювати вертикально за допомогою комірок таблиці.
Змініть свій div
на контейнер flex:
div { display:flex; }
Зараз є два способи центрувати вирівнювання для всього вмісту:
Спосіб 1:
div { align-items:center; }
Спосіб 2:
div * { margin-top:auto; margin-bottom:auto; }
Спробуйте різні значення ширини та висоти для img
та різних значень розміру шрифту на span
і ви побачите, що вони завжди залишаються в середині контейнера.
justify-content: center;
і для інтервалу (без використання тегів <br/>), який ви також можете вписати у padding: 1em;
. Чудове оновлення для нас сучасних розробників браузера.
Ви повинні застосувати 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 та 2, натхненні цією статтею CSS-трюки )
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
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 */
}
CSS (вищезазначена скрипка містить префікси постачальника):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
Цей код працює в IE, а також FF:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
Для запису вирівнювання "команди" не повинно працювати на SPAN, оскільки це вбудований тег, а не тег рівня на рівні блоку . Такі речі, як вирівнювання, поле, прокладка тощо, не працюватимуть на вбудованому тезі, оскільки точка вставки не полягає в порушенні потоку тексту.
CSS розділяє теги HTML на дві групи: рядок та рівень блоку. Пошук "css block vs inline" і чудова стаття показує ...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Розуміння основних принципів CSS є ключовим для того, щоб воно не було настільки дратує)
text-align
і vertical-align
(за винятком його застосування на td
елементи для застарілих цілей), спеціально призначені для inline
і inline-block
елементів ( span
, img
, і т.д.).
Використовуйте line-height:30px
для проміжку, щоб текст вирівнювався із зображенням:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Ще одна річ, яку ви можете зробити, це встановити текст line-height
за розміром зображень у межах <div>
. Потім встановіть зображення наvertical-align: middle;
Це серйозно найпростіший спосіб.
Я ще не бачив вирішення margin
жодної з цих відповідей, тому ось моє рішення цієї проблеми.
Це рішення працює лише в тому випадку, якщо ви знаєте ширину зображення.
<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>
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;
Зазвичай я використовую 3px замість top
. Збільшуючи / зменшуючи це значення, зображення можна змінити на потрібну висоту.
Ви можете встановити зображення як 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>
Багатолінійне рішення:
<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 +
Це може бути заплутано, я згоден. Спробуйте використовувати функції таблиці. Я використовую цей простий фокус 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; }
Зауважте, що ви повинні стилізувати та коригувати розмір контейнера зображення та таблиці, щоб він працював так, як вам завгодно. Насолоджуйтесь.
По-перше, вбудований 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>
Не впевнений, чому він не відображає його у веб-переглядачі вашої навігації, але я зазвичай використовую такий фрагмент, коли намагаюся відобразити заголовок із зображенням та зосередженим текстом, сподіваюся, що це допоможе!
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>
Ви, мабуть, хочете цього:
<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
vertical-align