Содержание
в не будет vertical-align:middle, почему?
у нас есть CSS:
#left,#right{width:450px;height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}
#left img, #right img{float:center; vertical-align:middle;cursor:pointer}
Изображение горизонтально центрировано, но выравнивается сверху (я хочу середину)
html похоже
<div>
<div><img/></div> <div><img/></div>
</div>
Есть идеи, что я делаю не так?
Кстати, вся эта проблема заключается в том, что я показываю изображения с разными разрешениями :S
EDIT
Это не помогло … 🙁
#left,#right{width:450px;line-height:450px;}
#left{position:absolute;left:20px;top:30px;}
#right{position:absolute;left:420px;top:30px;float:center;}
#left img,#right img{cursor:pointer;}
css
image
vertical-alignment
Поделиться
Источник
Toni Michel Caubet
01 апреля 2011 в 16:53
3 ответа
- vertical-align:middle работает не так, как ожидалось
Я просто хочу поместить изображения в контейнер фиксированной высоты: изображения не должны превышать высоту контейнера и должны быть центрированы вертикально.
Так что у меня есть <div id=partenaires> <img src=images/partenaires/Debian.png alt=Debian /> <img… - Почему vertical-align:middle не работает так, как text-align:center
Может ли кто-нибудь сказать мне, почему vertical-align:middle не работает так, как text-align:center ? Я имею в виду, почему так трудно заставить его работать? Я хочу знать, почему эти W3 ppl не делают text-align:middle Я спрашиваю, почему так трудно сделать vertical-align:middle похожим на…
Так что у меня есть <div id=partenaires> <img src=images/partenaires/Debian.png alt=Debian /> <img…
4
вы можете выровнять изображение в div, в котором нет текста, по вертикали, установив высоту строки в div. пример:
<div>
<img src="http://nelson-haha.com"/>
</div>
Поделиться
pmko
26 ноября 2012 в 07:19
3
Сначала вам нужно будет объявить некоторую высоту на #left или #right , чтобы выровнять ее по вертикали. (Как бы то ни было, у него не больше известного пространства для выравнивания по вертикали, чем пространство, которое он занимает, поэтому он всегда будет отображаться выровненным по верху.)
Во-вторых, убедитесь, что вы правильно поняли vertical-align . Вот хороший ресурс: http://phrogz.net/css/vertical-align/index.html Короче говоря, vertical-align , вероятно, не лучшее решение.
Поделиться
Unknown
01 апреля 2011 в 16:57
0
vertical-align на изображении — это то, как текст выравнивается по изображению, как текст обтекает изображение. Не так, как изображение отображается в div .
Пожалуйста, посмотрите это на StackOverFlow
Поделиться
SQLMason
01 апреля 2011 в 17:06
Похожие вопросы:
CSS vertical-align:middle не работает в IE7
У меня здесь есть этот кусок кода… <div class=pics2> <div style=position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 225px; height: 200px;> // this…
Работает ли vertical-align:middle; свойство на <div> элементах
У меня есть элемент divison, свойство vertical-align которого установлено в middle в css. Но, тем не менее, текст в divison появляется сверху. Работает ли это свойство на дивисонах или нет? Далее…
Изображение не vertical-align:middle
У меня есть 1 div wrapping h3 и изображение, завернутое в div с классом img. h3 — это float:left и img float:right. img div имеет изображение внутри. Чего я хочу, так это если изображение имеет…
vertical-align:middle работает не так, как ожидалось
Я просто хочу поместить изображения в контейнер фиксированной высоты: изображения не должны превышать высоту контейнера и должны быть центрированы вертикально. Так что у меня есть <div…
Почему vertical-align:middle не работает так, как text-align:center
Может ли кто-нибудь сказать мне, почему vertical-align:middle не работает так, как text-align:center ? Я имею в виду, почему так трудно заставить его работать? Я хочу знать, почему эти W3 ppl не…
CSS vertical-align:middle на div внутри якоря
Я пытаюсь заставить div с css свойством display:table-cell; vertical-align:middle вести себя так же, как он should. Я ожидаю, что текст внутри этих дивов будет выровнен по вертикали независимо от…
почему css используйте встроенный блок необходимо добавить псевдо-элемент (пусть vertical-align:middle работы)
.pseudo{ width:100%; height:100px; border:1px solid blue; text-align:center; } .pseudo:before{ content:; display:inline-block; vertical-align:middle; height:100%; } .pseudo p{ display:inline-block;…
vertical-align:middle div внутри плавающего div?
Почему черная полоса в третьем столбце не выравнивается по вертикали в середине родительского div? Вместо этого он выравнивается немного ниже верха. Есть ли способ это исправить?…
vertical-align:middle не работает кнопка загрузки
Я не могу выровнять текст внутри кнопок по вертикали, используя стиль vertical-align:middle, используемый при вертикальном выравнивании текста и значка в кнопке bootstrap <link…
Почему` position:absolute; ‘уничтожить ` vertical-align:middle’?
Текст center расположен в центре div, например, ниже кода show. .Absolute-Center { display: table-cell; width: 100px; height: 100px; border:1px solid red; text-align:center; vertical-align:middle; }…
CSS — vertical-align — Свойство CSS vertical-align устанавливает вертикальное выравнивание встроенного
Свойство CSS vertical-align устанавливает вертикальное выравнивание встроенного блока, блока встроенного блока или ячейки таблицы.
Свойство вертикального выравнивания может использоваться в двух контекстах:
- Выровнять по вертикали блок встроенного элемента внутри содержащего его линейного блока. Например, его можно использовать для вертикального позиционирования
<img>в строке текста:
- Выровнять по вертикали содержимое ячейки таблицы:
Обратите внимание, что vertical-align применяется только к элементам inline, inline-block и table-cell: вы не можете использовать его для вертикального выравнивания элементов уровня блока .
Syntax
vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; vertical-align: 10em; vertical-align: 4px; vertical-align: 20%; vertical-align: inherit; vertical-align: initial; vertical-align: unset;
Свойство vertical-align указывается в качестве одного из значений, перечисленных ниже.
Значения для встроенных элементов
Родительско-относительные ценности
Эти значения выравнивают элемент по вертикали относительно его родительского элемента:
baseline- Выравнивает базовую линию элемента с базовой линией его родителя. Базовая линия некоторых замененных элементов , таких как
<textarea>, не указана в спецификации HTML, что означает, что их поведение с этим ключевым словом может различаться в разных браузерах. sub- Выравнивает базовую линию элемента с абонентской линией его родителя.
super- Выравнивает базовую линию элемента с надстрочной базовой линией его родителя.
text-top- Выравнивает верхнюю часть элемента со шрифтом родительского элемента.
text-bottom- Выравнивает нижнюю часть элемента с нижней частью шрифта родительского элемента.
middle- Выравнивает середину элемента с базовой линией плюс половину высоты x родителя.
<length>- Выравнивает базовую линию элемента на заданную длину выше базовой линии его родителя.Допускается отрицательное значение.
<percentage>- Выравнивает базовую линию элемента по указанному проценту над базовой
line-heightего родительского элемента со значением в процентах от свойства line-height . Отрицательное значение допускается.
Относящиеся к линии значения
Следующие значения выравнивают элемент по вертикали относительно всей линии:
top- Выравнивает верхнюю часть элемента и его потомков с верхней частью всей линии.
bottom- Выравнивает нижнюю часть элемента и его потомков с нижней частью всей линии.
Для элементов,которые не имеют базовой линии,вместо нее используется нижний край поля.
Значения для ячеек таблицы
-
baseline(иsub,super,text-top,text-bottom,<length>и<percentage>) - Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек в ряду,которые выровнены по базису.
top- Выравнивает верхний край набивки ячейки с верхним рядом.
middle- Центрирует обивку ячейки в пределах ряда.
bottom- Выравнивает нижний край набивки ячейки с нижним рядом.
Допускаются отрицательные значения.
Formal definition
Формальный синтаксис
baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
Examples
Основной пример
HTML
<div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> image with a default alignment.</div> <div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> image with a text-top alignment.</div> <div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> image with a text-bottom alignment.</div> <div>An <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> image with a middle alignment.</div>
CSS
img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }
Result
Specifications
Совместимость с браузерами
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Хромовый Android | Firefox для Android | Опера Андроид | Safari на IOS | Samsung Интернет | |
vertical-align | 1 | 12 | 1 | 4 | 4 | 1 | 1 | 18 | 4 | 14 | 1 | 1.0 |
См.также
Vertical Centering in CSS
Yuhu’s Definitive Solution with Unknown Height
Though there is a CSS property vertical-align, it doesn’t work like attribute
valign in HTML tables. CSS property vertical-align doesn’t seem to be able to
solely solve this problem:
Definition of the problem
- there is an area (e.g. <div>) with known height in the page
- an internal object (typically long text in <div>) is inside the area
and I don’t know its height (e.g. because its content is
dynamically generated from a database) - I want to center the object vertically within the area
- without using HTML tables.
No general solution was known until September 2004. I have found it going
home on Wilson street.
Display an
example of the vertical centering in your browser.
Update 2015 — flex
As new browsers support display: flex, it is much easier to vertical
center an item with CSS than before.
<style>
#containter {
height: 400px;
display: flex;
/* flex-direction: column;*/
align-items: center;
/* justify-content: center;*/
}
#content {}
</style>
<div>
<div>
any text<br>
any height<br>
any content, for example generated
from DB<br>
everything is vertically centered
</div>
</div>
See this example in browser.
Uncommenting justify-content: center or
flex-direction: column you can get other types
of centering (horizontal, both). For instance justify-content: center with
align-items: center leads to centered content both vertically and
horizontally.
The most important rule is display: flex.
This relatively new value switches the display of the
containter to a special mode, enabling its
direct descendant to use and align in all the space of the containter
(using special properties like align-items and
others). The container has set some width, i.e. width: 400px just for
purpose of this example. There is no need to style the content element, but
it must be direct descendant of the container.
Support of display: flex is very good in modern browsers. Last not-supporting
browsers are Internet Explorer 9 and 10 (version 10 has a special syntax of
flex). If it is important for you to optimize for those and older browsers,
you should read the rest of this page.
Original content from 2004 with updates:
The idea
The keystone of the solution for Internet Explorer 6, 7 or quirk mode
is this: the internal object is absolutely positioned in half of the area
height. Then is moved up by half of its height. The wrong
interpretation of the height property in older Internet Explorer is used as
a feature here (counted height is taken as a base of percentage height of
nested tags). One extra nested tag <div> is needed for those Explorers.
Solution for standard browsers like Mozilla, Opera, Safari etc. (including
IE 8, 9, 10 and younger) is completely different. Entire area (top <div>) is
set to be displayed as a table (display: table; part of CSS2). The internal
object is set as table-cell (display: table-cell). Now — there is the key
idea — it is possible to use vertical-align property for such table-displayed
element in standard browsers. (Internet Exlorer 6, 7 and quirk mode ignores
those properties or doesn’t know their values.)
Then both syntax are merged. I use the Pixy’s
underscore hack, but with sign #. A CSS property written with the char #
on the start (i.e. #position) is visible for IE 7 and older. Such written
property is invisible for any other standard browser (e.g. Explorer 6 or 7
interprets #position: absolute; unlike other browsers). This so
called «underscore hack» seems to be valid, but if you don’t want to use it,
you may use the more structured code below in my
second example (unfortunately, not working for IE 7). Other types of
browsers and Internet Explorer 8 and younger don’t need to be hacked, as
they support display: table-cell properly.
Compatibility
The code below works in Internet Explorer 5.0, 5.5, 6.0, 7, 8, 9 and 10
beta, in Gecko browsers (Mozilla, Firefox, Netscape 7), in Opera 7, 8 and up,
every Chrome, Konqueror 3.3.1. (maybe lower too), and in Safari (Win, iOS).
The page can be HTML, HTML5 or XHTML, standard or quirk mode.
The valid example doesn’t work in IE 7 standard mode (update 2012: about
3 % of clients). If you find any easy workaround for IE 7, please let me
know.
Understandable code:
<!DOCTYPE HTML>
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders
to see it */
</style>
</head>
<body>
<div>
<div>
<div>
any text<br>
any height<br>
any content, for example
generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>
See this example in
browser
Legend for colors:
CSS styles for every browser
CSS styles for standard browsers
CSS style only for Internet Explorer 6, 7 and quirk (with # hack)
The result looks:
any text
any height
any content, for example generated from DB
everything is vertically centered
See this example in
browser
Let’s make it structural and without hacks
(NOTE: this valid solution described below doesn’t work in Internet Explorer
7 (standard mode), because IE7 doesn’t understand table- values in display
property. The centered object is too high. BUT: IE 7 is used by only about 3
% of users (2012) and the number will decrease. If you still do mind IE7
users, please use the non-valid solution above, write in quirk mode, or use
html conditional comments for separating the properties for IE 7 somehow.)
The first example above is not nice, but I hope you have understood it. It’s
possible to write code differently. For example this way:
<div>
<div>
<div>
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>
And the structured valid style:
<style type=»text/css»>
#outer {height: 400px; overflow: hidden; position:
relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;}
/* for quirk explorer only*/
#middle[id] {display: table-cell; vertical-align:
middle; width: 100%; position: static;}
#inner {position: relative; top: -50%}
/* for quirk explorer only */
/* optional: #inner[id] {position: static;} */
</style>
See the valid
example in browser (it looks the same way as the last one).
Color legend:
CSS style for Internet Explorer 6 only (or quirk)
CSS styles for standard browsers
CSS2 selector #value[id] is equivalent to selector #value,
but Internet Explorer 6 ignores these types of selectors with [id].
Generally: syntax
*[foo] means any element with attribute foo. Any
HTML element #something must have the attribute id by definition set to «something».
That’s the trick — #value[id] works in standard browsers only
(similarly works .value[class])
There’s CSS property position set to absolute or relative for Internet
Explorer. The code position: static get’s it back to default
value in standard browsers (property top doesn’t work then).
Both vertical and horizontal centering
The core code will be the same, you just need to add some extra CSS rules.
If is your page in standard mode, add this code:
<style>
#outer {width: 100%;}
#inner {width: 200px; margin-left: auto; margin-right: auto;}
</style>
As you probably see, this is the most common horizontal centering method —
auto left and right margin. Because margins needs the space in Firefox and
Opera, you need to set a width to the #outer div. If 100% doesn’t fit your
needs, use any other value.
The important thing is to set some proper width to #inner. This tutorial is
about vertical centering of an object with unknown height. I assume that
you know the width of the object (in most cases you will simply decide
how wide it should be). You may use the pixel values, or the percentage
width. If the centered object is only an unknown-size image, you don’t need
to set width.
If you use quirk mode page rendering (mode depends on !Doctype, as you know),
added code should be a bit longer, because quirk mode of Exploder doesn’t
understand auto margins, but has one nice bug in text-align interpretation
instead. This code should work for both standard and quirk mode:
<style>
#outer {width: 100%;}
#middle {width: 100%; text-align: center;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align:
left;}
</style>
Please take note that this is just part of code, which you have to add to
the previous example. If you are lazy to combine codes, please see the
complete example in browser:
vertical
and horizontal centering. You know, I’m lazy too.
How to center vertically on window’s height
The same way, and just add the style:
<style>
body, html {height: 100%;}
#outer {height: 100%; overflow: visible;} /* or without overflow */
...
</style>
It seems that #outer declaration should be sufficient, but it is not. Body
and html declaration sets 100% of the window’s height as a base for next
percentage. Now it is better not to set overflow: hidden (like in the
examples above), because when the content would be taller than window, then
it would be impossible to scroll on.
Related
Previous attempt to center vertically:
Examples:
Read in other language:
Centralizando verticalmente com CSS — Brazilian Portuguese translation of
this article by Maurício Samy Silva
Вертикальне центрування в CSS — Ukrainian translation by Agnessa Petrova
from A2Goos team
Вертикальное центрирование в CSS — Russian translation by Aleksandr Molochan
Czech version of this article
(original, not updated)
All other articles on this website
www.jakpsatweb.cz is in Czech.
About
First published Sep 21, 2004, updated Oct 23, 2006 and May 25 2008. Major
update Dec 6 2012 including bugfix of code in valid example. June 2015 major
update about flex. I’ll update this article with more information if you
wish.
Author:
Dušan Janovský
aka Yuhů
[email protected]
www.jakpsatweb.cz
From Prague, Czech Republic, search algorithms specialist in Seznam.cz
search engine. Wi
Tw
Fb
vertical-align | Вертикальное выравнивание текста
vertical-align [w3.org] работает только с элементами таблицы и inline-элементами (в т.ч. с display: inline-block;).
vertical-align для элементов таблицы и для display: table-cell;
vertical-align, заданное элементам таблицы, выравнивает содержимое в ячейке по вертикали.
▼
baseline
top
bottom
| текст | строка1 |
<style>
.demotable {
background: #E7D5C0;
}
.demotable td {
height: 150px;
border: 1px dashed #E7D5C0;
background: #fff5d7;
vertical-align: middle; baseline; top; bottom;
}
</style>
<table>
<tr>
<td><img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/>
<td>текст
<td><div>строка1<br>строка2</div>
</table>Строка
Базовая линия (англ. baseline, или линия шрифта) — это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, например, как у букв «ц», «д», «р», «щ».
display: table-cell; похож на <td>. Высота элемента с display: table-cell; равна высоте наиболее высокого элемента с display: table-cell; из группы. vertical-align тут также выравнивает содержимое по вертикали, но уже по умолчанию имеет значение baseline.
▼
middle
top
bottom
текст
строка1
строка2
<style>
.demotable {
background: #E7D5C0;
}
.demotable > div {
display: table-cell;
height: 150px;
border: 1px dashed #E7D5C0;
background: #fff5d7;
vertical-align: baseline;middle;top;bottom;
}
</style>
<div>
<div><img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/></div>
<div>текст</div>
<div><div>строка1<br>строка2</div></div>
</div>Если элемент с display: table-cell; нужно выровнять по высоте родителя, то родителю нужно указать display: table; или display: inline-table;.
▼
display: table;
текст
строка1
строка2
<style>
.demotable {
display: table;
height: 150px;
background: #E7D5C0;
}
.demotable > div {
display: table-cell;
border: 1px dashed #E7D5C0;
background: #fff5d7;
vertical-align: middle;
}
</style>
<div>
<div><img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/></div>
<div>текст</div>
<div><div>строка1<br>строка2</div></div>
</div>vertical-align у элементов с display: inline;, display: inline-block; и display: inline-table;
vertical-align у строчных тегов выравнивает по вертикали сам элемент относительно родителя, если его высота меньше высоты текущей строки родителя (свойство line-height).
▼
top
text-top
middle
bottom
text-bottom
inherit
Отступ сверху: px
Высота элемента: px
Отступ снизу: px
<style>
.sem {
background: #fff5d7;
line-height: 150px;
font-size: 0;
}
.sem div {
display: inline-block;
font-size: medium;
line-height: normal;
vertical-align: baselinetoptext-topmiddlebottomtext-bottominherit ;
}
</style>
<div><div>
</div></div>Или относительно соседних элементов, находящихся на данной строке.
▼
top
text-top
middle
bottom
text-bottom
sub
super
inherit
Элемент <sub>Текст строки x <sup>display: inline-block;
<style>
b {
font-size: 150%;
vertical-align: baseline; top; text-top; middle; bottom; text-bottom; sub; super; inherit;
}
span {
display: inline-block;
height: 5em;
}
</style>
<b>Элемент</b> <sub><sub></sub> Текст строки x <sup><sup></sup> <span>display: inline-block;</span> <img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/>
Практическое использование: Как сделать обтекание картинки текстом.
Или vertical-align сам увеличивает строку родителя на значение, указанное в px или %.
%
px
Элемент <sub>Текст строки x <sup>display: inline-block;
<style>
b {
font-size: 150%;
vertical-align: baseline;
}
span {
display: inline-block;
height: 100px;
}
</style>
<b>Элемент</b> <sub><sub></sub> Текст строки x <sup><sup></sup> <span>display: inline-block;</span> <img src="http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwh3Y/s72-c/Logo-Blogger.png" alt="Blogger"/>
vertical-align не работает
Ещё раз хочу обратить внимание на то, что для inline-элементов vertical-align: middle;:
- выравнивает сам элемент, а не его содержимое. То есть не будут желаемого результата, если
vertical-alignприсвоить родителю. - выравнивает элемент только относительно других соседних элементов, если для родителя не указана
line-height. То есть у родителя должно быть два и более дочерних элементов.
у родителя
без соседей
ура, оно!
<style>
.parent {
min-height: 150px;
background: #E7D5C0;
text-align: center;
vertical-align: middle;
display: inline-block;
width: 100%;
}
.parent div {
max-width: 300px;
width: 100%;
height: 100px;
background: #fff5d7;
text-align: left;
display: inline-block;
vertical-align: middle;
vertical-align: middle;
}
.parent:before {
content: "";
display: inline-block;
min-height: inherit;
height: 100%;
vertical-align: middle;
}
</style>
<div><div></div></div>Этот вариант вертикального выравнивания текста по центру блока предпочтителен, поскольку line-height может не поддерживаться мобильными браузерами, такими как Opera Mini [opera.com], и равнозначен с display: table-cell;.
vertical-align — Дока
Кратко 🔗
Свойство vertical-align выравнивает текстовые элементы по вертикали относительно друг друга.
🤖 Для простого текста это не особо актуально, то вот для строчно-блочных (inline-block) элементов это свойство может быть очень полезным.
Пример 🔗
Пусть у нас на странице есть три строчно-блочных элемента. Для объяснения работы свойства vertical-align они будут разной высоты:
HTML
<div>
<div></div>
<div></div>
<div></div>
</div>CSS
.element {
display: inline-block;
width: 50px;
height: 50px;
background-color: white;
}.medium {
height: 100px;
}
.big {
height: 150px;
}
Все три блока по умолчанию выровнялись по нижней границе. Это стандартное поведение. Изменим его и выровняем элементы по верхней границе:
CSS
.element {
vertical-align: top;
}Как это понять 🔗
С английского языка словосочетание vertical align дословно переводится как вертикальное выравнивание. Что в точности совпадает с ожидаемым результатом от использования этого свойства.
Как пишется 🔗
Значение свойства vertical-align чаще всего задаётся при помощи ключевого слова. Единовременно можно указать лишь одно значение.
Рассмотрим доступные значения на примере с котиком 😍:
baseline— значение по умолчанию. Выравниваемый элемент выстраивается по нижней линии текста. Если в родительском элементе нет текста, то элемент выравнивается по нижней границе.
top— верхняя граница элемента находится на уровне верхней границы строки.
middle— мысленно проведи две вертикальные линии: одну через центр текста, а вторую через центр котика. Текущее значение свойства сопоставляет эти линии. Таким образом элемент выравнивается по центру.
bottom— выравнивает нижнюю границу элемента по уровню нижней границы строки.
sub— удобное значение, если нужно создать нижний индекс. Например, в химических формулах: H₂O. Опускает базовую линию так, чтобы элемент опустился до уровня нижнего индекса:
super— работает почти какsub, только поднимает базовую линию вверх.
Помимо ключевых слов можно использовать числовые значения.
Если указать значение в любых доступных единицах измерения, то положительное значение сдвинет элемент вверх относительно базовой линии, а отрицательно — вниз.
Если указать числовое значение в процентах, то за 0% берётся нижняя граница текста без выносных элементов. То есть аналогично baseline. Процент рассчитывается от line-height (line-height) родительского элемента.
Подсказки 🔗
💡 Свойство vertical-align применяется к элементам, которые нужно выровнять, а не к родительскому элементу.
💡 На всякий случай: вертикально — это сверху вниз. Слева направо — это горизонтально 😉
💡 Свойство очень пригождается когда нужно выровнять картинку или emoji относительно текста.
В работе 🔗
Алёна, @ABatickaya
🛠 Свойство vertical-align каверзное. Многие начинающие разработчики пытаются применить его к родительскому элементу, по аналогии с text-align. И ничего не выходит. Просто запомни, что его нужно применять к тому элементу, который хочется выровнять.
🛠 С появлением флексбоксов выравнивание по вертикали производится при помощи align-items. Поэтому на свойство vertical-align стоит обратить внимание, только если работаешь с вёрсткой на строчно-блочных элементах.
Автор: Алёна, @ABatickaya
Обратная связь
✅ Спасибо за ваше мнение!
🛑 Что-то пошло не так и данные не отправились. Нам очень важно знать ваше мнение, пришлите его на почту [email protected]
vertical-align | CSS | WebReference
Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
Краткая информация
| Значение по умолчанию | baseline |
|---|---|
| Наследуется | Нет |
| Применяется | К строчным элементам или ячейкам таблицы |
| Анимируется | Да |
Синтаксис
vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|
<размер> | <проценты>Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
В качестве значения также можно использовать проценты, пиксели или другие доступные
единицы. Положительное число смещает элемент вверх относительно базовой линии,
в то время как отрицательное число опускает его вниз. При использовании процентов, отсчёт ведётся от значения свойства line-height, при этом 0% аналогично значению baseline.
Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.
- baseline
- Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
- bottom
- Выравнивает по нижнему краю ячейки.
- middle
- Выравнивает по середине ячейки.
- top
- Выравнивает содержимое ячейки по её верхнему краю.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>vertical-align</title>
<style>
.tex { font-size: 2rem; }
.tex sub {
vertical-align: sub;
font-size: 1.8rem;
}
.tex sup {
vertical-align: 5px;
font-size: 1.6rem;
}
</style>
</head>
<body>
<div>
T<sub>E</sub>X и L<sup>A</sup>T<sub>E</sub>X
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства vertical-align
Объектная модель
Объект.style.verticalAlign
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
выравнивание по вертикали | CSS-уловки
Свойство vertical-align в CSS управляет выравниванием элементов, расположенных рядом друг с другом в строке.
img {
вертикальное выравнивание: по центру;
} Для того, чтобы это работало, элементы должны быть установлены по базовой линии. Например, inline (например, , ) или
inline-block (например, как установлено свойством display ).
Допустимые значения:
-
baseline— это значение по умолчанию. -
top— Совместите верх элемента и его потомков с верхом всей строки. -
bottom— Выровняйте нижнюю часть элемента и его потомков с нижней частью всей строки. -
средний— выравнивает середину элемента по середине строчных букв в родительском элементе. -
text-top— выравнивает верх элемента по верхнему краю шрифта родительского элемента. -
text-bottom— выравнивает нижнюю часть элемента по нижнему краю шрифта родительского элемента. -
sub— выравнивает базовую линию элемента с нижней линией его родительского элемента. Например, где будет сидеть -
super— выравнивает базовую линию элемента с верхним индексом его родительского элемента. Например, где будет сидеть -
length— выравнивает базовую линию элемента на заданной длине над базовой линией его родительского элемента. (например, px,%, em, rem и т. д.)
Вы можете увидеть примеры каждого здесь:
Распространенный вариант использования — объединение аватара с именем пользователя.Чтобы выровнять их по центру линии, используйте vertical-align: middle; . Хотя обратите внимание, что он центрирует текст в соответствии с его самым высоким восходящим и самым глубоким нижним нижними элементами.
Каждый элемент выстраивается в соответствии с установленной вами линией, которая не меняется от элемента к элементу. Таким образом, вы можете смешивать и сопоставлять, какие элементы имеют какое значение — элементы не влияют друг на друга.
Обратите внимание, что vertical-align также полезно для элементов table-cell, выравнивает содержимое внутри них.Однако лучше всего придерживаться верхних, средних и нижних значений, поскольку другие значения дают противоречивые результаты в разных браузерах.
Дополнительная информация
- Что такое выравнивание по вертикали?
- Это свойство не позволяет вам «вертикально центрировать» элемент внутри другого элемента. Flexbox — более подходящий инструмент. Однако есть трюк с использованием псевдо «призрачного» элемента, который может позволить этому сработать.
- MDN
Поддержка браузера
| Хром | Safari | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Любая | любой | любой | 4+ | 4+ | любой | любой |
Достаточно единообразно для старых и новых браузеров, при условии, что шрифт один и тот же.
Обратите внимание, что некоторые элементы замены (например,