Вертикальное выравнивание текста

flexbox CSS

Flexbox — современный и очень гибкий способ расположения элементов на странице, который позволяет с легкостью создавать красивые интерфейсы, не засоряя код лишней разметкой и стилями. Я очень рекомендую вам им овладеть. В ближайших постах обязательно расскажу о нем подробнее.

Ну а пока вернемся к выравниванию по центру. 

Теперь давайте разберемся, что все это значит.

display: flex

При помощи этого свойства преобразуем родительский элемент в так называемый гибкий контейнер (flex container), при этом все вложенные элементыпервого уровня (т.е. непосредственные дочерние элементы) становятся так называемыми гибкими элементами(flex items), и вместе это все составляет flexbox лэйаут.

justify-content: center

Это свойство выравнивает содержимое контейнера по центру вдоль основной оси. Одним из ключевых моментов в модели flexbox является ось, вдоль которой располагаются элементы контейнера (свойство ). Ось может быть либо горизонтальной ( или ), либо вертикальной ( или ). По умолчанию используется значение , т.е. наши элементы располагаются по горизонтальной оси слева направо.

align-items: center

Кроме основной оси в flexbox есть перпендикулярная ей второстепенная ось. В данном случае, она вертикальная. Свойство описывает, как элементы контейнера расположены относительно нее.

Вот примерно то, что должно получиться.

Преимущество этого метода в его лаконичности, адаптивности (я имею в виду респонсивность) и, конечно, гибкости. Так, например, если вам нужно, чтобы по центру был не один блок, а несколько — просто добавьте их в HTML, никаких изменений в CSS вносить при этом не нужно. Ну разве не прелесть?!

Как вы, наверное догадались я предпочитаю использовать именно этот способ. Но это не значит, что я не пользуюсь другими. Все эти способы можно и нужно использовать (за исключением способа с и display: table-cell ), каждый в своей ситуации. Например, незачем использовать flexbox если вам просто нужно .

2-ой метод

Этот метод использует абсолютное позиционирование div-а, которому top устанавливается в 50%, а верхний отступ (margin-top) минус половине высоты контента. Это подразумевает, что объект должен иметь фиксированную высоту, которая определена в стилях CSS.

Поскольку высота фиксированная, вы можете установить overflow:auto; для div-а содержащего контент, таким образом, в случае если контент не будет влазить, то появятся скролл-бары.

Минусы

Когда не достаточно места, контент пропадает (например, div находится внутри body, а пользователь уменьшил окна, в этом случае скролл-бары не появятся.

line-height: о проблемах и прочих вопросах

у строчного элемента есть две различных высоты: высота области содержимого и высота виртуальной области (virtual-area)

• Высота области содержимого определяется метриками шрифта (как мы уже видели ранее).
• Высота виртуальной области (virtual-area) представляет собой , и это — высота, которая используется для вычисления высоты контейнера строки.

В других редакторских программах это может быть расстоянием между базовыми линиями. Например, в Word и Photoshop это так и есть. Основная разница в том, что в CSS это расстояние есть и для первой строки.

• замещаемые строчные элементы (, , и т. д.);
• и все элементы типа ;
• строчные элементы, которые задействованы в особом контексте форматирования (например, в элементе flexbox все flex-компоненты блокофицируются).

• Общие значения Ascent/Descent: высота верхнего выносного элемента — 770, нижнего — 230. Используются для создания символов (таблица «OS/2»).
• Метрики Ascent/Descent: высота верхнего выносного элемента — 1100, нижнего — 540. Используются для определения высоты области содержимого (таблицы «hhea» и «OS/2»).
• Метрика Line Gap (междустрочный интервал). Используется для определения , данное значение прибавляется к метрикам Ascent/Descent (таблица «hhea»).

• Для строчных элементов — padding и border увеличивают область фона, но не высоту области содержимого (и не высоту контейнера строки). Поэтому область содержимого — это не всегда то, что видно на экране. От и нет никакого эффекта.
• Для замещаемых строчных элементов, элементов типа и блокофицированных строчных элементов — , и увеличивают и, следовательно, высоту области содержимого и контейнера строки.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент
написания этой статьи (2014 год), хороший способ вертикального
выравнивания блока без использования абсолютного позиционирования
(что может приводить к частичному перекрытию текста) всё ещё
обсуждается. Но если вам известно, что частичное перекрытие текста
не станет проблемой в вашем документе, вы можете использовать
свойство ‘transform’, чтобы выровнять по центру абсолютно
позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

<div class=container3>
  <p>Этот абзац…
</div>

таблица стилей выглядит так:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основные правила:

1. Сделайте контейнер относительно позиционированным
   (position: relative), что превратит его в контейнер для абсолютно
   позиционированных элементов.

2. Сам элемент сделайте абсолютно позиционированным
   (position: absolute).

3. Поместите элемент посередине контейнера с помощью ‘top: 50%’.
   (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)

4. Используйте translate, чтобы переместить элемент вверх на
   половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’
   указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких
реализациях CSS стала доступна новая техника. Она основана на новом
ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово
предназначено для использования в графическом интерфейсе
пользователя (GUI), но ничто не мешает вам использовать его в
документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Вертикальное выравнивание

С вертикальным выравниванием намного больше проблем — по всей видимости, такое в CSS не было предусмотрено. Есть несколько способов добиться желаемого результата, но все они не очень красивые.

Выравнивание свойством line-height

В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство «line-height» и установив ему желаемую высоту. Для надежности стоит установить еще и «height», значение которого будет равно значению «line-height», потому что последние поддерживается не во всех браузерах.

Это фиолетовая строчка, высота которой равна высоте блока.

.example-wrapper4{
line-height: 100px;
color: #DC09C0;
background: #E5DAE1;
height: 100px;
text-align: center;
}

Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно «inline». К нему нужно применить «vertical-align: middle».

А это inline-элемент. Здесь несколько оранжевыхстрочек. Они выравниваятсяза счет установленной высоты строки блока-родителя.

.example-wrapper5 {
line-height: 160px;
height: 160px;
font-size: ;
background: #FF9B00;
}

.example-wrapper5 .text1{
display: inline-block;
font-size: 14px;
line-height: 1.5;
vertical-align: middle;
background: #FFFAF2;
color: #FF9B00;
text-align: center;
}

У блока обертки должно быть установлено «font-size: 0». Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.

Выравнивание по вертикали в таблицах

Свойство «vertical-align» также действует на ячейки таблицы. C установленным значением «middle», контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав «display: table-cell».

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

осталось 10 шт

307грн.($14.05)

осталось 7 шт

267грн.($16.79)

.one_product .img_wrapper {
display: table-cell;
height: 169px;
vertical-align: middle;
overflow: hidden;
background: #fff;
width: 255px;
}

.one_product img {
max-height: 169px;
max-width: 100%;
min-width: 140px;
display: block;
margin: 0 auto;
}

Следует помнить, что если у элемента установлено «float» отличное от «none», то он в любом случае будет блочным (display: block) — тогда придется использовать дополнительный блок-обертку.

Выравнивание дополнительным inline-элементом

И для inline-элементов можно применить «vertical-align: middle». При этом все элементы с «display: inline», которые находятся в одной строке, выровняются относительно общей центральной линии.

Нужно создать вспомогательный блок с высотой, равной высоте родительского блока, тогда и желаемый блок выровняется по центру. Для этого удобно использовать псевдоэлементы :before или :after.

.example-wrapper6{
height: 300px;
text-align: center;
background: #70DAF1;
}


.pudge {
display: inline-block;
vertical-align: middle;
background: url(pudge.png);
background-color: #fff;
width: 200px;
height: 200px;
}


.riki { 
display: inline-block;
height: 100%;
vertical-align: middle;
}

Шаг 3

И последнее что мы сделаем, это добавим кое-какие стили, чтобы страничка выглядела немного привлекательнее. Давайте начнём с меню.

Первое что мы сделали, чтобы меню выглядело лучше, удалили маркеры, установив атрибут list-style:none, а также установили внутренние и внешние отступы, так как по умолчанию в разных броузерах они сильно различаются.

Обратите внимание, что затем мы указали чтобы ссылки отбражадись как блочные элементы. Теперь, при выводе, они растягиваются по всей ширине элемента в котором они расположены

Другая интересная вещь, которую мы использовали для меню — это псевдо-классы :before и :after. Они позволяют вам добавить что-нибудь перед и после элемента. Это хороший способ добавлять иконки или символы, такие как стрелочка в конце каждой ссылки. Такой трюк не работает в Internet Explorer 7 и ниже.

position и отрицательный margin вверх

Элемент можно выровнять по вертикали, задав ему фиксированную высоту и применив position: absolute и отрицательный margin-top, равный половине высоты выравниваемого элемента. Родительскому блоку должен быть присвоен position: relative:

<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выравнивание. Способ line-height</title>
<style>
.wrapper {
   position:  relative;
   height:  400px;
}
.wrapper p {
   height:  200px;
   margin:  -100px 0 0;
   position:  absolute;
   top: 50%;
}
</style>
</head>
<body>
   <div class="wrapper">
      <p>Я выровнен по вертикали</p>
   </div>
</body>
</html>

Плюсы:

• Кроссбраузерность;
• Выравнивать элементы можно как по центру, так и в любом другом положении.

Минусы:

• Трудоемко при большом количестве элементов;
• Сложно управлять;
• Необходимо знать и фиксировать высоту элемента;
• В некоторых браузерах абсолютное позиционирование может вызвать снижение производительности.

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

CSS — Выравнивание по вертикали

1. Отцентровать один элемент (, ) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS .

HTML-код:

<div class="parent">
  ...
  <div class="child">
    ...
  </div>
</div>  

CSS-код:

.parent {
  line-height: 500px;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.

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

Браузеры, которые поддерживают данное решение:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Property Values

Value	Description	Play it
baseline	The element is aligned with the baseline of the parent. This is default	Play it »
length	Raises or lower an element by the specified length. Negative values are allowed. Read about length units	Play it »
%	Raises or lower an element in a percent of the «line-height» property. Negative values are allowed	Play it »
sub	The element is aligned with the subscript baseline of the parent	Play it »
super	The element is aligned with the superscript baseline of the parent	Play it »
top	The element is aligned with the top of the tallest element on the line	Play it »
text-top	The element is aligned with the top of the parent element’s font	Play it »
middle	The element is placed in the middle of the parent element	Play it »
bottom	The element is aligned with the lowest element on the line	Play it »
text-bottom	The element is aligned with the bottom of the parent element’s font	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

Использование таблицы для выравнивания текста по вертикали в CSS

В отличие от инлайн-блоков, выравнивание ячейки таблицы позволяет переместить и ее содержимое. Сделать это можно просто средствами HTML.

<table id="outwrap">
    <td id="out">
        <div id="in"></div>
    </td>
</table>

Недостатков у такого подхода два:

1. Неправильно с позиции семантики применять таблицы для этой цели.
2. Необходимо создать лишний элемент.

Исправить первый недостаток можно, изменив теги table и td на div и использовать режим отображения «table» и «table-cell» соответственно.

#outwrap {
    display: table;
}

#out {
    display: table-cell;
}

Но вот второй недостаток все равно останется. Код будет немного тяжеловат, особенно если таких элементов много.

Text-decoration, text-align, text-indent в CSS

Как же в Css работать с текстом? Вполне логично будет предположить, что для этой цели существуют специально предназначенные правила. Давайте начнем с text-align, которое является фактически заменой атрибута align (он использовался в чистом Html 4.01 по версии валидатора для выравнивания содержимого, например, абзацев P или заголовков).

Он имеет всего четыре возможных значения:

Смысл остается таким же, как и был раньше. Text align — это горизонтальное выравнивание строк. Применяется это правило исключительно только для блочных элементов (параграфы, заголовки и т.п.), т.е. тех тегах, в которых может появиться несколько строк. Т.к. в строчных элементах строк может быть только одна, то и смысла использования в них text-align особого нет.

Понятно, что значения этого правила означают выравнивание, соответственно: по левому краю (left), по правому краю (right), по центру (center) и по ширине страницы (Justify — одновременно по левому и правому краю за счет увеличения расстояния между словами). Само собой, что значение Justify стоит использовать для элементов хотя бы с несколькими строками текста, иначе видимого эффекта от этого не будет.

Для примера, я выровнял предыдущий абзац по ширине (видите у него ровные границы и слева, и справа), используя:

text-align:justify;

По умолчанию горизонтальное выравнивание текста осуществляется по левому краю, т.е. специально писать text-align:left не нужно, если, конечно же, раньше вы не задавали другое выравнивание. Этот абзац я, кстати, выровнял по центру (center) опять же для наглядного примера, но тут, я думаю, все и так понятно.

Следующее Css правило text-indent позволяет задать красную строку, например, для текста в теге абзаца P. Отступ красной строки можно задать с помощью указания величины (как со знаком плюс, так и со знаком минус, используя размеры (пиксели, em или ex) допустимые в CSS) или с помощью процентов:

От чего считаются проценты в text-indent? От ширины области, которая отведена под текст. Т.е. Css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. Ну, а этот абзац как раз и служит примером такого правила.

А можно, например, задать отрицательное значение красной строки в text-indent и тогда мы получим примерно то, что вы видите в этом абзаце. Для достижения данного результата я написал для тега абзаца P вот такое вот CSS правило:

text-indent:-1em;

Ну, а обычное использование text-indent (для задания стандартной красной строки) может выглядеть так: text-indent:40px; (кстати, применено к этому параграфу). Это правило, так же как и рассмотренное раньше text-align, применяется только для блочных элементов, т.е. там, где может появиться несколько строк (абзацы, заголовки и т.п.).

Так, теперь давайте перейдем к text-decoration (оформление с помощью горизонтальной линии), которое применяется уже ко всем Html элементам (и строчным, и блочным).

Оно может иметь всего четыре значения:

Т.е. можно использовать с помощью text-decoration: надчеркивание (overline), перечеркивание (line-through) или подчеркивание (underline), ну, или вообще ничего не использовать (none). Некоторые Html элементы уже имеют по умолчанию оформление горизонтальной линией, например, гиперссылки (тег A) (они по умолчанию подчеркиваются).

Поэтому выделять что-то еще подчеркиванием (кроме гиперссылок) не есть хорошо, ибо у пользователей в подсознании записано, что раз подчеркнуто (а еще и цветом выделено) — значит по этому можно кликнуть для перехода. Но выделяя подчеркиванием обычный текст, вы вводите пользователя в заблуждение и последующее за ним разочарование вашим ресурсом (он то думал, а оказалось что…).

Если текст гиперссылки нужно будет сделать неподчеркнутым (например, в меню), то используйте для text decoration элемента гиперссылки значение none.

Нюансом в использовании Css правила text-decoration является то, что можно будет прописать сразу три (иди два) значения для любого Html элемента (опуская none) и в результате вы получите надчеркнуто-подчеркнуто-перечеркнутый фрагмент текста (прикольно звучит и смотрится, не правда ли?):

text-decoration:underline overline line-through;

Значения для text decoration (если вы хотите использовать сразу несколько из них) нужно писать через символ пробел.

Фальшивые колонки

Это достаточно старый трюк, который широко используется для создания колонок одинаковой высоты.

Заключается он в использовании фонового изображения, которое повторяется по вертикали. Пример такого изображения приведён ниже (в целях наглядности он немного увеличен).

Такое изображение, как правило, имеет 1 px в высоту и ширину, равную ширине шаблона.

HTML

В примере используется следующая разметка:

<div id="container">
	<div id="sidebar">
		<p>Боковая панель</p>
	</div>
	<div id="content">
		<p>Основное содержание</p>
	</div>
</div>

В качестве контейнера можно использовать тег . В примере используется отдельный элемент для демонстрации возможности применения метода к части содержания страницы.

CSS

#container {
	width:960px;
	margin:0 auto;
	background: url("faux-columns.png") repeat-y;
	overflow: hidden
}
#sidebar {
	float:left;
	width:340px;
}
#content {
	float:left;
	width:620px;
}

Код CSS весьма прост. Смещаем плавающие блоки #sidebar и #content влево и устанавливаем соответствующую ширину для них. Устанавливаем отступы для контейнера #container.

В качестве фона для контейнера мы используем изображение faux-column.png (именно такое, как описывалось выше). Также для него устанавливается свойство . Оно нужно для того, чтобы предотвратить сворачивание контейнера.

Контейнер всегда будет иметь такую же высоту, как и самая большая колонка. Фоновое изображение поэтому будет выглядеть так, как будто колонки имеют одинаковую высоту.

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

Вы также можете использовать весь спектр визуальных средств для фона (тени, рамки и так далее). Также можно задействовать изображения более чем 1 px в высоту.

Минусы:

• Требуется изображение, которое использует дополнительный запрос HTTP.
• Изменения в шаблоне требуют изменений в изображениях.

Примеры

Давайте рассмотрим работу свойства vertical-align на нескольких примерах. Присвоим разные значения строчно-блочным элементам.

Для начала посмотрим работу этого свойства со значением baseline, используемым по умолчанию.

В примере создадим контейнер #container, внутри которого будем размещать наши строчно-блочные элементы #small и #big для экспериментов.

Вот результат работы этого кода:

текст
у

Границы строчно-блочных элементов выделены красным цветом.

Мы видим, что наш текст отформатирован так, как будто он написан в тетрадке. Я специально выбрал символ строчная буква «у», она пишется с «хвостиком» ниже базовой линии.

Теперь поменяем значение свойства vertical-align на bottom:

текст
у

Теперь нижние границы всех элементов выстроены в одну линию

Тут стоит обратить внимание на очевидный факт: строчно-блочные элементы выравниваются относительно строки, а не контейнера, а которому принадлежат. По другому это свойство будет вести себя в таблицах, но об этом поговорим позже

Далее, поменяем значение свойства vertical-align на middle:

текст
у

Теперь элементы в строке выровнены по центру.

Ну и последний пример, поменяем значение свойства vertical-align на top:

текст
у

Имеем ожидаемый результат: строчно-блочные элементы размещены по верхнему краю строки.

Задача посложнее

Давайте теперь решим такую задачу: нам нужно в этом контейнере разместить текст по центру вертикали контейнера #container.

Ключ решения такой задачи следующий: нужно высоту строки сделать равной высоте блока. Высоту строки можно задать с помощью свойства line-height.

Высота нашего контейнера height: 100px. Только тут нужно учитывать то, что у нашего контейнера уже есть padding: 2px, который накладывается с margin: 2px строчно-блочных элементов, но у них есть border: 1px, который также нужно учесть.

То есть, корректная высота строки line-height будет равна: height: 100px минус (padding: 2px + border: 1px) *2 (так как нужно учитывать верх и них) = 94px.

Итак, код:

Результат:

текст
у

Display: flex и выравнивание

Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять «display: flex». Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать «margin: auto» для центрирования контента внутри.

Пока что такой способ практически не встречался мне, но особых ограничений для него нет. 

.example-wrapper7{
display: flex; 
height: 300px;  
background: #AEB96A;
}

.example-wrapper7 img{
margin: auto;
}

Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!

Свойство для вертикального выравнивания vertical-align

Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.

В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.

Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег </p> и задаем для него стиль vertical-align:middle;

Но на практике все оказывается немного сложней. Дело в том что данное свойство срабатывает только для табличных элементов и для того чтобы оно заработало нужно будет пойти на одну хитрость.

Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.

CSS

.text-vertical-al{
display:table;
}
.text- vertical -al p{
display:table-cell!important;
vertical-align:middle;
}

1 2 3 4 5 6 7 8

.text-vertical-al{ displaytable; }   .text- vertical -al p{ displaytable-cell!important; vertical-alignmiddle; }

В результате у нас все заработало:

Выравнивание текста по вертикали CSS

Для выравнивания по вертикали текста в таблице можно использовать только значения top, bottom, middle, baseline. Другие значения для таблиц не работают.

Вот еще один пример выравнивания текста по вертикали css, но именно при работе с таблицей.

Допустим вам нужно выровнять текст по вертикали для всей таблицы. В этом случае в файле CSS для класса table нужно написать следующее:

CSS

table.table-va td{
border: 1px solid #1e1e1e;
background-color: rgba(0, 146, 243, 0.13);
height: 40px;
vertical-align:middle; /* выравнивание текста по вертикали css*/
}

1 2 3 4 5 6

table.table-va td{ border1pxsolid#1e1e1e; background-colorrgba(0,146,243,0.13); height40px; vertical-alignmiddle;/* выравнивание текста по вертикали css*/ }

В этом случае во всех ячейках текст будет выровнен по вертикали по центру:

CSS выравнивание по вертикали в таблице

По верху

По центу

По низу

Так же можно задать выравнивание по вертикали для каждой ячейки. В этом случае проще всего указать стили для каждого элемента в коде HTML или при помощи псевдоклассов nth-child() в CSS:

XHTML

<table class=»table-va»>
<caption>CSS выравнивание по вертикали в таблице</caption>
<tbody>
<tr>
<td style=»vertical-align:top;»>По верху</td>
<td style=»vertical-align:middle;»>По центу</td>
<td style=»vertical-align:bottom;»>По низу</td>
</tr>
</tbody>
</table>

1 2 3 4 5 6 7 8 9 10

<table class=»table-va»> <caption>CSS выравнивание по вертикали в таблице</caption> <tbody> <tr> <td style=»vertical-align:top;»>По верху</td> <td style=»vertical-align:middle;»>По центу</td> <td style=»vertical-align:bottom;»>По низу</td> </tr> </tbody> </table>

Вот что получится:

CSS выравнивание по вертикали в таблице

По верху

По центу

По низу

Выравнивание по вертикали в div-контейнере

Не смотря ни на что, для выравнивания внутри div-контейнера мы будем использовать свойство vertical-align. Как я уже говорил, данное свойство можно использовать в случае выравнивания строчных элементов (этот случай мы подробно рассмотрели выше и для выравнивания в div-контейнере он нам не подходит); остается лишь использовать тот факт, что vertical-align работает для ячеек таблицы.

Как же мы сможем это использовать? У нас же нет таблицы, мы работаем с div-контейнером.

Ха, оказывается очень просто.

CSS-свойство display позволяет превратить наш блок div в ячейку таблицы, сделать это можно легко и непринужденно:

Пусть у нас есть div класса textalign:

<div class=»textalign»>Содержимое блока</div>

Для данного блока указываем следующее CSS-свойство:

.textalign{
    display: table-cell;
}

Эта CSS-инструкция чудесным образом превратит наш блок div в ячейку таблицы, визуально никак его не изменив. А для ячейки таблицы мы сможем применять свойство vertical-align в полной мере и будет работать желаемая центровка по вертикали.

Однако, все так просто закончится не может. У нас же есть замечательный браузер IE. Он не умеет работать со свойством display: table-cell (предлагаю вам ознакомится с табличкой, иллюстрирующей работоспособность данного CSS-свойства в разных браузерах на сайте htmlbook.ru). Поэтому нам придется идти на различные ухищрения.

Существует множество способов добиться выравнивания в div-контейнере для всех браузеров:

• Способ с применением дополнительного вспомогательного div-котнейнера
• Способ с использованием expression-а. Связан он с хитрым вычислением высот блоков. Без знания JavaScript тут не обойтись.
• Использование свойства line-height. Данный способ подходит только для вертикального выравнивания в блоке известной высоты, а значит в общем случае не применим.
• Использование абсолютного и относительного смещения содержимого в случае браузера IE. Мне этот способ кажется наиболее понятным и простым. Кроме того, он реализуем для div-контейнера переменной высоты. На нем мы остановимся подробнее.

Как вы понимаете, нам остается решить проблему вертикального выравнивания в IE, связанную с его непониманием свойства display: table-cell (ни IE6, ни IE7, ни IE8 с этим свойством не знакомы). Поэтому воспользовавшись условным комментарием специально для браузеров семейства IE мы укажем другие свойства CSS.

Почему нет звука

После того как наушники были соединены с разъемами на звуковой карте компьютера, чаще всего, звук уже в них проигрывается и никаких дополнительных настроек делать не приходится.

Однако, иногда, звука нет. Вот на этом и остановимся поподробнее.

Первое, что необходимо, это проверить работоспособность гарнитуры. Попробуйте их соединить с другим устройством в доме: с плеером, с телевизором, музыкальным центром и пр.
Проверьте, установлены ли на звуковую карту на вашем ПК. Если звук в колонках у вас есть — значит с драйверами все в порядке. Если нет — зайдите для начала в диспетчер устройств (для этого откройте панель управления, и вбейте в поисковую строку «диспетчер», см

скриншот ниже).
Обратите внимание на строчки «Аудиовыходы и аудиовходы», так же на «звуковые устройства» — там не должно быть никаких красных крестиков или восклицательных знаков. Если они есть — переустанавливайте драйвера.
Если с наушниками и драйверами все в порядке, то чаще всего отсутствие звука связано с настройками звука в Windows, которые, кстати, могут быть выставлены на минимум! Обратите внимание сначала на правый нижний угол: там есть значок динамика.
Также стоит зайти в панель управления во вкладку «звук».
Здесь можно посмотреть как выставлены настройки громкости

Если настройки звука убавлены на минимум, прибавьте их.
Также по бегающим ползункам звука (показаны зеленым цветом на скриншоте ниже) можно сделать вывод о том, проигрывается ли звук вообще на ПК. Как правило, если все хорошо — полоска будет постоянно меняться по высоте.
Кстати, если подключили наушники с микрофоном, стоит зайти и во вкладку «запись». Там отображается работа микрофона. См. картинку ниже.Лучшим вариантом в данном случае будет соединение с одним линейным выходом. Т. е. колонки и наушники буду подсоединены параллельно: звук будет и там и там одновременно. Просто, когда колонки ненужны — их легко отключить при помощи кнопки включения на их корпусе. А звук будет всегда, просто если они ненужны — можно их отложить в сторону.
Для того чтобы подключить таким образом — нужен небольшой раздвоитель, цена вопроса — 100-150 рублей. Купить такой раздвоитель можно в любом магазине, специализирующимся на разных кабелях, дисках, и др. мелочи к компьютерам.
Микрофон от наушников при таком варианте — присоединяется стандартно, к разъему для микрофона. Тем самым получаем идеальное способ: не нужно постоянно пере-подсоединять с колонками.
Кстати, на некоторых системных блоках есть передняя панелька, на которой есть выходы для подключения наушников. Если у вас блок такого типа — то вам вообще никаких раздвоителей не понадобится.

Вывод звука — это отдельная часть в использовании персональных компьютеров и ноутбуков. Некоторые пользователи предпочитают эксплуатировать наушники вместо обычных колонок, считая это самым удобным способом прослушивания. Подключение проводной гарнитуры редко вызывает лишние вопросы, но сегодня речь пойдет об исключениях. Как подключить наушники с микрофоном к ноутбуку с одним входом? Данная статья поможет вам познакомиться со всеми нюансами подключения гарнитуры к компьютеру.