Как вставить текст посередине границы блока?
Здравствуйте! Как сделать подобное? Есть идея использовать рамку как background-image и поверх писать текст на html. Есть ли какие-то еще варианты?
Отслеживать
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак
задан 4 июн 2016 в 6:55
43 1 1 серебряный знак 4 4 бронзовых знака
Используйте
4 июн 2016 в 7:02
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Этого можно добиться с помощью комбинации тегов и :
legend
Отслеживать
ответ дан 4 июн 2016 в 7:15
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак
Только стоит обратить внимание, что выравнивание с помощью CSS не везде работает; например, в Firefox 46.0.1 на Ubuntu 14.04 LTS (64-bit), также (на сколько мне не изменяет память в IE не работает) . Тогда можно использовать атрибут align со значение center : jsfiddle.net/3fhspz12; но тогда, в свою очередь, документ не пройдет валидацию: goo.gl/hGqR7N.
4 июн 2016 в 8:12
@RomanGrinyov, проверил в Edge, в IE 11 и во всех режимах эмуляции вплоть до 8-го IE. Везде работает. В Firefox на Ubuntu проверить не могу, но верю вам на слово
4 июн 2016 в 8:27
fieldset < width: 910px; height: 294px; >legend < padding-left: 40px; /* Свои значения */ padding-right: 40px; /* Свои значения */ >Ну и ваш текст и его стилистика внутри.
Отслеживать
ответ дан 4 июн 2016 в 7:26
601 4 4 золотых знака 14 14 серебряных знаков 24 24 бронзовых знака
Мы с вами об одном решении подумали :). Только атрибут align уже давно устарел, лучше перенесите свойство в стили.
4 июн 2016 в 7:28
@VenZell, Да, знаю) Text-align сначала не туда написал 🙂
4 июн 2016 в 7:37
Еще как вариант
* < padding: 0; margin: 0; box-sizing: border-box; >body < background: url('http://zellox.com/wp-content/uploads/2016/02/best-nature-background-desktop.jpg') no-repeat center top; -webkit-background-size: cover; background-size: cover; >.b < overflow: hidden; padding: 25px 0; max-width: 400px; margin: 25px auto; >.b-inner < border: 3px solid #fff; border-top: none; color: #fff; font-size: 16px; position: relative; background: rgba(0,0,0,0.3); >.b-text < padding: 25px; >.b-title < position: absolute; top: -12px; left: 0; width: 100%; text-align: center; font-size: 18px; >.b-title > span < position: relative; display: block; >.b-title > span:before, .b-title > span:after < content: ""; display: inline-block; background-color: #fff; height: 3px; position: relative; vertical-align: middle; width: 50%; >.b-title > span:before < right: 0.5em; margin-left: -50%; >.b-title > span:after
title text text text text text text text text text text text text text text text text text text text text
title text title text text text text text text text text text text text text text text text text text text text text
Отслеживать
ответ дан 4 июн 2016 в 7:43
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
- html
- css
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Выравнивание текста в таблице с помощью CSS
По умолчанию текст в ячейке заголовка (th) и в ячейках тела таблицы (td) выровнен следующим образом:
по высоте — по середине,
по ширине — по левому краю ячейки.
Выровнять текст первого столбца по центру/правому краю можно при помощи конструкции
table td:first-child /* выравнивание по центру*/ table td:first-child /* выравнивание по правому краю*/
Выровнять текст в ячейке по вертикали по верхней/нижней границе ячейки можно только в случае, если для ячейки задана высота:
table td /* выравнивание по верхней границе ячейки */ table td /* выравнивание по нижней границе ячейки */
Как выровнять таблицу по центру страницы/блока?
Выровнять таблицу по центру можно при помощи конструкции
Выравнивание по центру в CSS
Выравнивание элементов по центру в CSS — это одна из самых популярных причин чтобы пожаловаться на CSS. «Почему всё так сложно?» — возмущаются они. Мне кажется, что проблема заключается не в том что это трудно сделать, а в том что способов для выравнивания элементов по центру очень много и бывает достаточно сложно выбрать из них подходящий.
Давайте выстроим все возможные решения в виде древовидной схемы и будем надеяться, что это упростит нашу задачу.
Итак, мне нужно выравнять элемент по центру.
Горизонтальное выравнивание
Выравнивание по центру строкового или строково-* элемента
Выравнивать по центру строковые элементы внутри блочного родительского элемента можно достаточно просто:
.center-children
Это будет работать для inline , inline-block , inline-table , inline-flex , и т. д.
Выравнивание по центру блочного элемента
Выравнять по центру блочный элемент вы можете установив свойствам margin-left и margin-right значение auto (у него также должна быть задана ширина, иначе элемент просто займёт всю ширину контента и не будет необходимости в выравнивании). Чаще всего это делается с помощью сокращённого свойства, вот так:
.center-me
Это будет работать независимо от того какая ширина установленная у блочного элемента или его родителя.
Обратите внимание, что вы не сможете обтекать элемент выравненный по центру таким способом. Однако и для этого есть трюк.
Выравнивание по центру нескольких блочных элементов
Если есть два или более блочных элементов, которые вам нужно выравнять горизонтально по центру в пределах одной строки, то возможно вам лучше изменить их тип отображения. Ниже приведён пример изменения их типа отображения на inline-block и пример с Flexbox:
Если эти несколько блоков расположены на разных строках, то техника с автоматическими отступами по прежнему прекрасна:
Вертикальное выравнивание
Вертикальное выравнивание по центру в CSS немного сложнее.
Выравнивание по центру строкового или строково-* элемента
Выравнивание элемента с одной строкой
Иногда строковые/текстовые элементы могут выравниваться по центру просто потому что у них одинаковое значения для свойств padding-top и padding-bottom .
.link
Если для вас по каким-то причинам padding — это не вариант, а вы пытаетесь выровнять по центру некоторый текст и точно знаете, что он не будет обёрнут чем-то ещё, то есть есть небольшой трюк, суть которого заключается в том чтобы установить свойство line-height равным значению высоты элемента.
.center-text-trick
Выравнивание многострочного элемента
Одинаковые отступы сверху и снизу могут создать эффект выравнивания по центру и для многострочных элементов, но если это не сработает, то возможно что элемент в котором находится текст является ячейкой таблицы, либо такое его поведение явно задано со помощью CSS. В данном свойство vertical-align обрабатывает это, в отличии от того что оно обычно обрабатывает выравнивание элементов внутри строки.
Если это что-то похожее на таблицу, возможно вы сможете использовать Flexbox ? Отдельный Flex-элемент может быть легко расположен по центру внутри Flex-контейнера.
.flex-center-vertically
Помните, что это на самом деле актуально когда у контейнера есть фиксированная высота ( px , % , и другие), вот почему здесь у контейнера задана высота.
Если обе техники приведённые выше нельзя применить, вы можете использовать технику «призрачного элемента», в которой псевдоэлемент с высотой в 100% размещается внутри контейнера и тех выравнивается вертикально по центру него.
.ghost-center < position: relative; >.ghost-center::before < content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; >.ghost-center p
Выравнивание по центру блочного элемента
Выравнивание элемента с известной высотой
Довольно часто мы не можем знать высоту, по многим причинам: если изменяется ширина, текст может форматироваться и изменять высоту. Разная стилизация текста может изменять высоту. Разный размер шрифта может изменить высоту. Элементы с фиксированным соотношением сторон, такие как изображения, могут изменять высоту при изменении собственных размеров и т.д.
Но если вы знаете высоту элемента, то можете выравнивать по центру вот так:
.parent < position: relative; >.child < position: absolute; top: 50%; height: 100px; margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */ >
Выравнивание элемента с неизвестной высотой
Даже если вы не знаете высоту элемента, его всё ещё можно протолкнуть на 50% высоты его родителя, а после поднять на 50% его собственной высоты:
.parent < position: relative; >.child
Выравнивание элемента с помощью Flexbox
Небольшой сюрприз, это можно очень просто сделать с помощью Flexbox.
.parent
Горизонтальное и вертикальное выравнивание
Вы можете комбинировать представленные выше техники для того чтобы получить идеально выравненные по центру элементы. Но обычно их можно разделить на 4 группы:
Выравнивание элемента с фиксированной шириной и высотой
Использование отрицательных отступов ( maring ) равных половине этой ширины и высоты после абсолютного позиционирования элемента 50% / 50% выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:
.parent < position: relative; >.child
Выравнивание элемента с неизвестной шириной и высотой
Если вы не знаете ширину или высоту элемента, то можете использовать свойство transform и отрицательный translate в 50% в обоих направлениях (в зависимости от текущей ширины / высоты элемента) до центра:
.parent < position: relative; >.child
Выравнивание элемента с помощью Flexbox
Чтобы выровнять элемент по центру с помощью Flexbox вам нужно использовать два свойства центрирования:
.parent
Выравнивание элемента с помощью CSS Grid
Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:
body, html < height: 100%; display: grid; >span < /* thing to center */ margin: auto; >
Вывод
Теперь вы можете всё что угодно выравнять по центру в CSS.
Выравнивание текста в CSS: свойство text-align
В таких программах, как, например, Microsoft Word вы наверняка встречали инструменты выравнивания текста по горизонтали. Выровнять текст можно по левому или по правому краю, по центру или по ширине. То же самое есть и в CSS – выравнивание текста производится с помощью свойства text-align и соответствующих значений, которые показаны в таблице:
Как необходимо выровнять текст?
Подходящее значение
По левому краю
left
По правому краю
right
По центру страницы/блока
center
По ширине страницы/блока
justify
Выравнивание текста по тому краю, с которого он начинается (то есть текст, идущий слева направо, выравнивается по левому краю)
start
Выравнивание текста по противоположному краю (то есть текст, идущий слева направо, выравнивается по правому краю)
end
Пример записи стиля:
Рекомендации по использованию стилей
Значения left, right и center Текст, выровненный по левой стороне, практически всегда хорошо выглядит на веб-страницах и удобно читается. Выравнивание по правому краю в европейских языках, как правило, используется редко, однако совсем бесполезным его назвать нельзя: такой стиль пригодится для красивого оформления подписей к фото или цитатам, выравнивания содержимого ячеек таблиц или небольших фрагментов текста. Для этих же целей часто используется значение center . Значение justify Выравнивание текста в CSS по ширине ( justify ) можно применять для печатных версий страниц, но не рекомендуется увлекаться этим стилем на веб-страницах, созданных для просмотра на мониторе. Почему? На первый взгляд – выровненный по ширине текст выглядит красиво и ровно, как колонка в газете. Но чтобы так растянуть текст, браузеру приходится добавлять дополнительное пространство между словами, вследствие чего в тексте могут образовываться некрасивые зазоры, затрудняющие чтение. В программах, предназначенных для подготовки данных к печати, происходит намного более тонкая настройка интервалов в тексте, а также нередко используется перенос слов, чего нет во многих браузерах. Поэтому необходимо проверять, как выглядит на веб-страницах текст, выровненный по ширине, и в первую очередь задавать себе вопрос: удобен ли он для чтения? Особенно это касается узких блоков текста (в т. ч. мобильных версий страниц). Значения start и end Значения start и end для свойства text-align внедрены в CSS3 и работают практически так же, как left и right , но есть разница. Применив значение start к тексту, который идет слева направо (LTR – left-to-right), выравнивание будет по левому краю (соответственно, для текста, идущего справа налево (RTL – right-to-left), выравнивание будет по правому краю). Логично, что значение end работает противоположным образом (то есть выравнивает по правому краю LTR-текст и по левому краю – RTL-текст). Эти два значения не поддерживаются некоторыми браузерами, включая Internet Explorer, поэтому, если нет острой необходимости в их применении, рекомендуем использовать значения left и right .
На скриншотах показаны примеры использования различных значений для свойства CSS text-align: