Снова равномерное выравнивание блоков по ширине: постепенное улучшение до flexbox

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

Вертикальное выравнивание по центру в CSS немного сложнее.


Выравнивание по центру строкового или строково-* элемента

Выравнивание элемента с одной строкой

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

Если для вас по каким-то причинам padding — это не вариант, а вы пытаетесь выровнять по центру некоторый текст и точно знаете, что он не будет обёрнут чем-то ещё, то есть есть небольшой трюк, суть которого заключается в том чтобы установить свойство равным значению высоты элемента.

Выравнивание многострочного элемента

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

Если это что-то похожее на таблицу, возможно вы сможете использовать Flexbox ? Отдельный Flex-элемент может быть легко расположен по центру внутри Flex-контейнера.

Помните, что это на самом деле актуально когда у контейнера есть фиксированная высота (, , и другие), вот почему здесь у контейнера задана высота.

Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.

Выравнивание по центру блочного элемента

Выравнивание элемента с известной высотой

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

Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:

Выравнивание элемента с неизвестной высотой

Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на высоты его родителя, а после поднять на его собственной высоты:

Два способа абсолютного позиционирования

Абсолютное позиционирование выдергивает элемент из общего потока, поэтому важно определить относительное позиционирование для родительского элемента, относительно которого будет происходить центрирование. CSS

CSS

.parent{ position:relative; } .child{ position:absolute; }

1 2 3 4 5 6 7 8

.parent{

positionrelative;

}

.child{

positionabsolute;

}  

Растягивание

Притянем внутренний блок одновременно к верху и низу внешнего и позволим браузеру самостоятельно рассчитать отступы:

CSS

.child{ top:0; bottom:0; height:100px; margin:auto; }

1 2 3 4 5 6 7 8

.child{

top;

bottom;

height100px;

marginauto;

}  

Отрицательный маргин

Это другая техника абсолютного позиционирования блока известных размеров. Он размещается в центре родительского блока, а затем смещается вверх на половину своей высоты.

CSS

.child{ top:50%; height:100px; margin-top: -50px; }

1 2 3 4 5 6 7

.child{

top50%;

height100px;

margin-top-50px;

}  

Вариант 4. Высоты обоих блоков неизвестны

Вариант 1

Простое выравнивание всех блоков по центру страницы.

Отцентрируем содержимое UL из 4 элементов LI, которые находятся в блоке DIV с классом container.

<div class=»container»>     <ul>         <li></li>         <li></li>         <li></li>         <li></li>     </ul> </div>

В таком случае в CSS достаточно следующих правил:

.container {     width: 100%; } .container ul {     text-align: center;     list-style: none; } .container li {     display: inline-block; }

Получим следующий вид:

Здесь отцентрировано 4 элемента LI. При уменьшении размеров экрана не помещающиеся элементы уходят вниз.

Если блоки LI с этими свойствами не устанавливаются по центру, значит какое-то другое свойство им мешает. Например, это может быть свойство float:left или display: table; или какое-то иное.

Теперь верхнюю структуру (в базовый каркас выравнивания CSS) можно добавить и другие стили. Например, сделать фиксированного размера блоки и отступы друг от друга:

.container li {     display: inline-block;     margin: 5px;     width: 100px; }

Получим следующее:

Но в таком варианте есть один минус. Блоки расположены по центру, но слева и справа огромные расстояния. Их можно уменьшить изменяя width.

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


Тогда мы уберём margin и добавим ширину такого width, чтобы он полностью покрывал область.

.container li {   vertical-align: top;   display: inline-block;   width: 32.899%; }

Между блоками останется небольшой участок пустого пространства. А чтобы его сделать ещё больше, можно отступать внутри с помощью параметра padding.

В блоках я специально не добавляю ничего лишнего, чтобы оставить ровно те стили которые непосредственно влияют на выравнинвание. Но если вы сделаете тоже самое, то такие блоки не получить. Хотя бы потому что, во-первых, нужно добавить цвет к блоку, а во-вторых, если он пустой поставить height: 100px;. Другие атрибуты уже по своему вкусу.

Итоговый вариант такой:

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

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

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

Есть три основных решения.

Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи :

Это, конечно, не совсем центр. По центру находится верхняя граница. Нужно ещё приподнять элемент на половину своей высоты.

Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.

Если мы знаем, что это ровно одна строка, то её высота равна .

Приподнимем элемент на пол-высоты при помощи :

Почему ?

При стандартных настройках браузера высота строки , если поделить на два .

Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи и отрицательного .

Вертикально отцентрировать одну строку в элементе с известной высотой можно, указав эту высоту в свойстве :

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

У свойства , которое управляет вертикальным расположением элемента, есть два режима работы.

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

Его возможные значения:

Значение по умолчанию.
, ,
Располагать содержимое посередине, вверху, внизу ячейки.

Например, ниже есть таблица со всеми 3-мя значениями:

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

Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение . Для элемента с таким используются те же алгоритмы вычисления ширины и центрирования, что и в . И, в том числе, работает :

Пример центрирования:

Этот способ замечателен тем, что он не требует знания высоты элементов.

Однако у него есть особенность. Вместе с родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.

Чтобы его растянуть, нужно указать явно, например: :

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

Это можно починить, завернув «псевдоячейку» в элемент с , которому и поставим ширину:

Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например для блочных элементов или на родителе – для других.

Для инлайновых элементов (), включая картинки, свойство центрирует сам инлайн-элемент в окружающем его тексте.

В этом случае набор значений несколько другой:


Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.

Допустим, высота внешнего элемента . Укажем её в свойстве :

Работает во всех браузерах и IE8+.

Свойство наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для .

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

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

Пример:

  • Перед центрируемым элементом помещается вспомогательный инлайн-блок , занимающий всю возможную высоту.
  • Центрируемый блок выровнен по его середине.

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

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

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

Варианта два:

  1. Убрать лишний пробел между и началом , будет .
  2. Оставить пробел, но сделать отрицательный у , равный размеру пробела, чтобы сместился левее.

Второе решение:

Данный метод поддерживается всеми современными браузерами.

Плюсы:

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

Минусы:

Не поддерживается IE9-, IE10 поддерживает предыдущую версию flexbox.

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

Как выровнять текст в Ворде, по ширине, левому или правому краю, выравнивание абзаца, строки или ячейки таблицы в Word 2007, 2010, 2013

Microsoft Word – наиболее популярный текстовой редактор. Он предоставляет возможность форматировать и оформлять различные документы. Разнообразие инструментов облегчает работу любому пользователю. В том числе доступно выравнивание текста разными способами в Word 2007, 2010, 2013.

Существующие виды выравнивания

Форматирование может быть горизонтальное и вертикальное. Первый вариант определяет ориентацию краев текста или заголовка, и разделяется на несколько типов:

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

Вертикальное актуально не только для строк в Word, как горизонтальное, а для всего текста. Также различают несколько типов:

  • по верхнему краю – осуществляется выравнивание вдоль верхнего поля;
  • центру – не изменяет интервалы между полями сверху и снизу, распределяя текстовой документ в середине поля;
  • высоте – текст или изображение равномерно располагаются на листе;
  • по нижнему краю — текст располагается внизу поля.

Выравнивание текста

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

Горизонтальное

Чтобы выровнять текст в Ворде по горизонтали необходимо:

  1. Выделить нужную часть документа в окне редактора с помощью перетаскивания курсора мыши или воспользовавшись специальной кнопкой.
  2. В верхней части окна в разделе «Абзац» выбрать формат, представленный в виде специальных значков.

  Пошаговая инструкция по созданию буклета или брошюры в Microsoft Word

Также редактор предусматривает использование горячих клавиш на клавиатуре:

  • Ctrl + L – по левому краю;
  • Ctrl + E – центру;
  • Ctrl + R – правому краю;
  • Ctrl + J – ширине страницы.

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

Чтобы установить параметры вертикального форматирования, нужно сделать следующее:

  1. В разделе «Разметка страницы» нажать на значок квадрата «Параметры страницы».
  2. Появится окно, где нужно перейти на «Источник бумаги». В соответствующем пункте выбрать из всплывающего меню нужную опцию.

Окно «Абзац»

Чтобы отформатировать документ еще одним способом, нужно выделить текст и щелкнуть правой клавишей мыши. Из выпадающего меню выбрать пункт «Абзац». В появившемся окне на закладке «Отступы и интервалы» раскрыть меню перед соответствующей опцией.

Отмена выравнивания

Если текст удалить, то форматирование страницы все равно сохранится, потому что здесь расположены нечитаемые символы и теги оформления. Чтобы отменить все параметры нужно щелкнуть на значок табуляции, расположенный в разделе «Абзац» на панели инструментов Ворда.

После отображения всех знаков их нужно выбрать выделением и нажать Del на клавиатуре. Страница должна полностью удалиться.

Выравнивание текста в таблице

Чтобы выровнять текст в таблице в Ворде, можно воспользоваться одним из двух способов:

  1. Выделить всю таблицу или ячейку, кликнуть правой клавишей мыши и нажать на «Абзац», затем определить нужный параметр.
  2. Курсор перенести на ячейку, кликнуть правой клавишей мыши. В меню навести курсор на «Выравнивание ячеек» и нажать на соответствующую иконку.

Текстовой редактор Microsoft Word рассчитан для использования как профессионалами, так и обычными пользователями. Чтобы быстро и аккуратно оформить текстовой файл, достаточно разобраться с основным функционалом программы.

Заголовки в HTML

Для того, чтобы создать заголовок на странице используется специальный тег <h> c индексом. Таких индексов всего шесть — от 1 до 6, они указывают на размер заголовка (<h1> является самым большим заголовком, <h6> — самым маленьким). Для примера создадим веб-страницу, имеющую несколько заголовков. Код этой страницы будет иметь вид:

В данном примере у нас имеется два заголовка — заголовок первого уровня здесь не имеет атрибутов, заголовок второго уровня — имеет атрибут выравнивания по центру. После заголовков идут абзацы, которые также имеют свои атрибуты.


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

Приветствую всех

Обращали ли вы внимание на то, что при оформлении дизайна название блога, заголовок сообщения и заголовки гаджетов расположены не по центру

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

Давайте посмотрим, как с помощью CSS в шаблоне блога можно это исправить. Расположим все заголовки строго по центру и добавим немного уникальности им.

Как обычно, идём во вкладку шаблон и обязательно делаем резервную копию. Если что-то пойдёт не так, вы сможете обратно загрузить шаблон со своего компьютера. А лучше будет, если пока все эксперименты вы будите делать на тестов блоге. Создайте для этого ещё один блог на основе того же шаблона.

Как выровнять по центру название блога. Вкладка шаблон — изменить HTML. В самом верху шаблона нажимаем на чёрный маркер (стрелочку) слева.

И вот тут перед нами открылись все коды  CSS. Спускаемся медленно вниз и находим строку .Header h1 { 

Сразу после скобок прописываем значение

 text-align:center;

Таким образом,  название блога расположиться строго по центру. Нажмите просмотреть шаблон, чтобы увидеть результат. Всё получилось. Нажимаем сохранить.

Но, чтобы немного разнообразить дизайн, разберём ещё несколько стилей CSS, которые можно добавить в эти скобки. Нужно это вам или нет решайте сами. Тут масса вариантов. Меняйте цветовые значения.

background:#e9967a;- цвет фона. или background:url (http://www.fonstola.ru/large/201310/134392.jpg); картинка вместо фона. height:50px; — значение ширины блока названия. text-shadow: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.10); — задаём тень для текста border-radius: 15px; — закругление углов. -moz-box-shadow:0 0 30px #a28b53 inset; box-shadow:0 0 30px #a28b53 inset;                             -webkit-box-shadow:0 0 30px #a28b53 inset;

Выделенное синим цветом — внутренняя тень поля названия. Только будьте внимательны. Если меняете цвет, то только вот это  #e9967a (решётка и шестизначное число)

Двоеточие, скобки, тире, точка с запятой — всё очень важно в коде

Как выровнять по центру заголовок гаджета в боковой панели.

Так же спускаемся ниже и находим такую строчку .sidebar .widget h2 { 

В скобки прописываем  text-align: center; Однако, в этом случае, необходимо задать ширину, размер шрифта, отступы. Здесь я вместо фона использовала изображение и задала тень для текста и блока.

background:url(http://www.fonstola.ru/large/201310/134392.jpg);фон или изображение height:20px; width: 200px; border-radius: 13px; margin-left: 0px; padding-top:0px; / расстояние от края рамки/ font-size: 16px; /размер шрифта/ text-align: center; /расположение текста/ text-shadow: 4px 3px 0px #d2bf94;, 6px 5px 5px rgba(0,0,0,0.10); /тень для текста/ box-shadow: 0 4px 6px rgba(0, 0, 0, .2); /тень для блока/

Шаг 2

Сейчас мы напишем простейший CSS, для размещения элементов на странице. Вы должны сохранить этот код в файле style.css. Именно на него прописана ссылка в html-файле.

Перед тем как сделать наш контент выровненным по центру, необходимо для body и html установить высоту 100%. Так как высота считается без внутренних и внешних отступов (padding и margin), то мы устанавливаем их (отступы) в 0, чтобы не было скроллбаров.

Нижний отступ для элемента «floater»-а равен минус половине высоты контента (400px), а именно -200px;

Сейчас ваша страничка должна выглядеть приблизительно так:

Поскольку элементу #centered установлено position:relative, мы можем использовать абсолютное позиционирование элементов внутри него. Затем установим overflow:auto; для элемента #content, чтобы появлялись скроллбары, в случае если не будет помещаться контент.

Центрирование по вертикали в 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), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

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

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

Мобилизация резервов

Но старые IE — давно не главная проблема. Сегодня куда важнее мобильные браузеры — прежде всего iOS Safari и встроенный браузер Андроида. И как назло последний не поддерживает ни беспрефиксных флексбоксов, ни .

Что же, возвращаться к распоркам? Ну уж нет! Все сколько-либо актуальные WebKit-браузеры поддерживают старую экспериментальную реализацию флексбоксов (спецификации 2009 года). И чем городить хаки, лучше уж подключить ее.

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

.menu {
    display: -webkit-box; /* Android 4.3-, Safari */
    -webkit-box-pack: justify; /* Android 4.3-, Safari */
    display: flex;
    justify-content: space-between;
    text-align: justify;
    text-align-last: justify;
}
.menu__item {
    display: inline-block;
}

Но почему-то это не заработало. Оказывается, в отличие от новых флексбоксов, которые применяют свою «магию» к дочерним элементам флекс-контейнера независимо от их , старые флексбоксы действовали только на блочное содержимое. И, поскольку нашим пунктам задан , с точки зрения старых флексбоксов они не стали самостоятельными флекс-элементами (flex-items), а оказались в единственном флекс-элементе, в который превратился окружавший их анонимный блочный бокс.

Итак, старые флексбоксы требуют, чтобы у элементов не было, а IE10- и Fx12-21 — чтобы был. Нам нужно «разрулить» этот конфликт. Я выбрал простейший путь — переопределил для пунктов на тот же , т.е. сделал их блочными флекс-контейнерами «старого образца» исключительно в вебкитьей реализации:

.menu {
    display: -webkit-box; /* Android 4.3-, Safari */
    -webkit-box-pack: justify; /* Android 4.3-, Safari */
    display: flex;
    justify-content: space-between;
    text-align: justify;
    text-align-last: justify;
}
.menu__item {
    display: inline-block;
    display: -webkit-box; /* !хак! для Android 4.3-, должен идти после inline-block */
}

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

Добавлено 11.04.15. Opera Mini больше не проблема! Обновление на ее серверах по волшебству добавило поддержку флексбоксов даже самым захудалым мобильникам, и теперь наше решение охватывает 93% всех браузеров (caniuse.com) даже без добавки старых IE!


С этим читают