Не работает выравнивание по ширине css

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

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

Табл. 1. Способы выравнивания текста

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Для установки выравнивания текста обычно используется тег абзаца

с атрибутом align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега

Выравнивание по левому краю	Выравнивание по правому краю	Выравнивание по центру	Выравнивание по ширине
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Табл. 2. Выравнивание текста с помощью параметра align

Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align=»left» можно опустить.

Отличие между абзацем (тег

Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде

. В примере 1 показано, как в подобном случае устанавливать выравнивание.

Пример 1. Выравнивание текста

Результат примера показан на рис. 1.

Рис. 1. Выравнивание текста по правому и левому краю

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

Источник

Выравнивание текста в CSS: свойство text-align

В таких программах, как, например, Microsoft Word вы наверняка встречали инструменты выравнивания текста по горизонтали. Выровнять текст можно по левому или по правому краю, по центру или по ширине. То же самое есть и в CSS – выравнивание текста производится с помощью свойства text-align и соответствующих значений, которые показаны в таблице:

Код HTML	Описание
Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы.
Выравнивание по ширине.
Отключает автоматический перенос строк, даже если текст шире окна браузера.
Текст	Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег .

Как необходимо выровнять текст?	Подходящее значение
По левому краю	left
По правому краю	right
По центру страницы/блока	center
По ширине страницы/блока	justify
Выравнивание текста по тому краю, с которого он начинается (то есть текст, идущий слева направо, выравнивается по левому краю)	start
Выравнивание текста по противоположному краю (то есть текст, идущий слева направо, выравнивается по правому краю)	end

Пример записи стиля:

Рекомендации по использованию стилей

На скриншотах показаны примеры использования различных значений для свойства CSS text-align:

Скриншот 1: выравнивание LTR-текста по левому краю при помощи значения start. Аналогичного вида можно добиться при помощи значения left. Скриншот 2: выравнивание LTR-текста по правому краю при помощи значения end. Аналогичного вида можно добиться с помощью значения right. Скриншот 3: выравнивание текста по ширине. При мелком шрифте и большой ширине страницы/блока такой вариант выравнивания текста на веб-странице смотрится приемлемо. Скриншот 4: увеличен размер шрифта и уменьшена ширина блока по сравнению с предыдущим примером. Как видим, появились некрасивые зазоры в тексте (подчеркнуты красной линией). Скриншот 5: два способа выравнивания текста на примере mobile-версии нашего учебника (слева – text-align: left, справа – text-align: justify). Попробуйте прочитать текст в обеих колонках и определить, какой вариант более комфортен для чтения.

Источник

3 способа выравнивания блоков по ширине

Сегодня мы разберем 3 основных способа выравнивания блоков по ширине с помощью CSS.

1. Выравнивание блоков на flexbox

На данный момент способ выравнивания блоков по ширине на флексах, самый простой, элегантный и имеет хорошую поддержку у браузеров. Чтобы решить нашу задачу, достаточно flex-контейнеру прописать всего два свойства: display: flex и justify-content: center.

// CSS стили
.flex-container <
display: flex;
justify-content: center;
margin-bottom: 20px;
>

.flex-item <
width: 100px;
height: 100px;
border: 2px solid salmon;
background-color: pink;
margin-left: 20px;
>

2. Выравнивание на inline-block

Свойство заданное контейнеру text-align: center, поставит все блоки по центру. Свойство display: inline-block, удерживает блоки в одном ряду. Этот способ можно использовать при верстке блоков преимуществ, карточек членов команды. Одним словом — все отдельно стоящие блоки на странице.

// CSS стили
.inline-container <
text-align: center; /* выравнивание по центру */
margin-bottom: 20px; /* отступ снизу */
>

.inline-item <
display: inline-block; /* отобразить элементы в строку */
border: 2px solid salmon; /* рамка у блока */
background-color: pink; /* цвет блока */
width: 100px; /* ширина блока */
height: 100px; /* высота блока */
margin-left: 20px; /* промежутки между блоками */
>

3. Выравнивание на float

При выравнивании блоков на флоатах, элементы один за другим извлекаются из потока и сдвигаются влево (float: left), пока не закончится место в ряду. Тем, кому не хватило места, спускаются на следующую строчку. До появления флексбоксов, флоаты были единственным адекватным способом выравнивания по горизонтали.

// CSS стили
.float-container <
margin-bottom: 20px; /* отступ снизу */
>

.float-item <
float: left;
border: 2px solid salmon;
background-color: pink;
width: 100px;
height: 100px;
margin-left: 22px; /* отбить блоки друг от друга */
>

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

Посмотрите демо на CodePen

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.

Источник

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

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

Выравнивание блоков с известными размерами

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

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством «padding«.

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа.

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

Если для блока задано «position: absolute«, тогда его можно позиционировать относительно ближайшего родителя с «position: relative». Для этого нужно всем свойствам («top«,»right«,»bottom«,»left«) внутреннего блока присвоить одинаковое значение, а также «margin: auto».

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль).

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

Выравнивание посредством «text-align: center»

Для выравнивания текста в блоке есть специальное свойство «text-align«. При установленном значении «center» каждая строка текста выровняется по горизонтали. Для многострочного текста такое решение используется крайне редко, чаще этот вариант можно встретить для выравнивания span-ов, ссылок или картинок.

Однажды мне пришлось придумывать текст, чтобы показать, как работает выравнивание текста при помощи CSS, но ничего интересного в голову не приходило. Сначала решила скопировать где-то детский стишок, но вспомнила, что это, возможно, подпортит уникальность статьи, и наши дорогие читатели не смогут найти ее в Гугле. И тогда я решила написать вот этот вот абзац — ведь суть не с нем, а суть в выравнивании.

Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов («display: inline»).

Выравнивание блоков при помощи margin

Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им «margin-left: auto; margin-right: auto». Обычно используется сокращенная запись: «margin: 0 auto» (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.

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

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

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

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

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

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

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

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

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

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

Источник

text-align

CSS	Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3	2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

Краткая информация

Значение по умолчанию	left
Наследуется	Да
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/text.html#propdef-text-align http://www.w3.org/TR/css3-text/#text-align

Версии CSS

Описание

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementById(» elementID «).style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

Источник