Как выровнять контент по середине css

Как выровнять содержимое ячеек таблицы по верхнему краю?

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

Решение

По умолчанию содержимое ячеек выравнивается по центру вертикали, что не всегда удобно, особенно если содержимое близлежащих ячеек различается по объему. При этом получится, что в одной ячейке текст начинается от верхнего края, а в другой по середине. Исправить это положение можно с помощью стилевого свойства vertical-align со значением top , добавляя его к селектору td , как показано в примере 1.

Пример 1. Применение vertical-align

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Выравнивание содержимого ячеек table < width: 100%; /* Ширина таблицы */ >td < padding: 5px; /* Поля в ячейках */ vertical-align: top; /* Выравнивание по верхнему краю ячеек */ >.col1 < background: #ccc; >.col2

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

Таблица с выравниванием содержимого ячеек по верхнему краю

Рис. 1. Таблица с выравниванием содержимого ячеек по верхнему краю

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Как выровнять ссылку по центру?

был применен класс css класса .forgot-pass , но text-align:center является единственным, который не был применен. Есть ли что-то, что я сделал не так? Или другое, что я мог бы получить в центре?

Peter Festejo 10 авг. 2018, в 15:07
Поделиться
Вам необходимо установить text-align: center на родительском элементе a .
Turnip 10 авг. 2018, в 12:16
Поделиться:

4 ответа

Поместите ссылку внутри тега p . Никакой диапазон, необходимый для вашего CSS:

.forgot-pass < margin-top: 15px; text-align: center; font-size: 12px; color: #cfcfcf; >.forgot-pass a:link, .forgot-pass a:visited < color: #cfcfcf; >.forgot-pass a:hover, .forgot-pass a:active

Johannes 10 авг. 2018, в 10:38
Поделиться
Зачем вам заключать якорь в тег

? Разве не цель

для абзацев?

ConsoleLog 10 авг. 2018, в 12:26

@ConsoleLog Поскольку исходный код вопроса содержал тег p . И параграф может содержать ссылку, то a тег. Однако тег рядный, то a p тег представляет собой блок, так с моим кодом ссылка может быть горизонтально по центру (так как блочные элементы имеют стандартную ширину 100% , если они не всплывают, сгибать элементы или элементы сетки.)

Johannes 10 авг. 2018, в 12:38

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

ConsoleLog 10 авг. 2018, в 12:44
@ Йоханнес, это работает для меня, но как я могу применить серебристый цвет?
Peter Festejo 10 авг. 2018, в 13:51

@PeterFestejo Я только что добавил в код то, что я добавил в виде простого примечания: Цвет текста ссылки перезапишет цвет ее контейнеров, поэтому вы должны определить его для ссылки iteslef (см. Мой пример в отредактированном ответе)

Johannes 10 авг. 2018, в 14:00
Показать ещё 3 комментария

Во втором примере проблема связана с тем, что оба элемента являются встроенными элементами. Встроенные элементы будут занимать столько горизонтального пространства, сколько требуется для содержимого. В результате установка text-align: center; не даст видимого эффекта, так как текст будет только центрироваться в элементе, который будет такого же размера, как и сам текст. Чтобы центрировать текст на странице, вы можете либо установить положение элемента вручную (например, position: absolute ), либо сделать его block элементом.

Следующий код будет центрировать ссылку на странице:

Brett Wolfington 10 авг. 2018, в 09:40
Поделиться

Это распространит ссылку по всей ширине элемента контейнера, а не только на текст «Забыли пароль», что может быть нежелательно. Чтобы избежать этого, поместите ссылку в элемент блока и отцентрируйте ее там (см. Фрагмент в моем ответе)

Как разместить grid элементы по центру?

Нужно что бы черные квадраты стали по центру, либо что бы между ними стали одинаковые отступы, как это сделать?

Отслеживать
12.8k 4 4 золотых знака 32 32 серебряных знака 61 61 бронзовый знак
задан 27 дек 2017 в 21:37
uzi_no_uzi uzi_no_uzi
2,186 2 2 золотых знака 18 18 серебряных знаков 50 50 бронзовых знаков
как и при display: flex — используем justify-content: center.
27 дек 2017 в 22:00

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

justify-content: center; Странно, правда? )

.container < display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 280px)); grid-column-gap: 18px; grid-row-gap: 20px; border: 1px solid red; justify-content: center; >.children

Отслеживать
ответ дан 28 дек 2017 в 5:40
Andrei Fedorov Andrei Fedorov
5,791 1 1 золотой знак 9 9 серебряных знаков 31 31 бронзовый знак
У меня не работало это свойство по какой-то непонятной причине
28 дек 2017 в 8:32

У меня тоже не работало, а вот это заработало

justify-items: center;

Отслеживать
28.6k 19 19 золотых знаков 59 59 серебряных знаков 139 139 бронзовых знаков
ответ дан 12 мар 2020 в 14:30
Андрей Величко Андрей Величко
31 1 1 бронзовый знак

Мне нравиться больше вот так:

height: 100vh; display: grid; place-items: center;

height: 100vh; display: grid; place-content: center;

Можно задавать два значение, выравнивая по горизонтали или вертикали!

А для отступов подойдёт:

gap: 10px;

Отслеживать
ответ дан 1 фев в 18:50
Nikita Shpikin Nikita Shpikin
11 3 3 бронзовых знака

html
css
css-grid

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Позиционирование содержимого

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

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

Позиционирование через float

Один из способов позиционирования элементов на странице — через свойство float . Это свойство довольно универсально и может применяться разными путями.

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

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

Свойство float принимает несколько значений, два самых популярных — это left и right , они позволяют элементу располагаться слева или справа от своего родителя.

float на практике

Давайте создадим общий макет страницы с шапкой вверху, двумя колонками в центре и подвалом внизу. В идеале эту страницу следует разметить с помощью элементов , , и , как описано в уроке 2 «Знакомство с HTML». Внутри элемента HTML может выглядеть так:

Демонстрация макета без float

Здесь элементы и являются блочными, поэтому они укладываются один поверх другого по умолчанию. Однако мы хотим, чтобы эти элементы располагались бок о бок. Установив float для как left , а для как right , мы можем позиционировать их как две колонки, расположенных напротив друг друга. Наш CSS должен выглядеть так:

section < float: left; >aside

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

Когда мы устанавливаем элемент обтекаемым, то убираем его из обычного потока HTML-документа. Это приводит к тому, что ширина этого элемента по умолчанию становится шириной его содержимого. Иногда, например, когда мы создаём колонки для многократно используемого макета, такое поведение нежелательно. Это можно исправить путём добавления свойства width с фиксированным значением для каждой колонки. Кроме того, чтобы обтекаемые элементы не соприкасались друг с другом, в результате чего содержимое одного элемента располагается рядом с другим, мы можем использовать свойство margin , чтобы установить пространство между элементами.

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

section < float: left; margin: 0 1.5%; width: 63%; >aside

Демонстрация макета с float

float могут изменить значение display у элемента

Для обтекаемого элемента также важно понимать, что элемент удаляется из обычного потока страницы и что у элемента может измениться значение display , заданное по умолчанию. Свойство float опирается на то, что у элемента значение display задано как block и может изменить значение display у элемента по умолчанию, если он ещё не отображается как блочный элемент.

Например, элемент, у которого display указан как inline , такой как строчный , игнорирует любые свойства height или width . Однако, если для строчного элемента указать float , значение display изменится на block и тогда элемент уже может принимать свойства height или width .

Когда мы применяем float для элемента, то должны следить за тем, как это влияет на значение свойства display .

Для двух колонок вы можете установить float , для одной колонки как left , а для другой как right , но для нескольких колонок нам придётся изменить наш подход. Скажем, к примеру, мы хотели бы получить ряд из трёх колонок между нашими элементами и . Если мы выбросим наш элемент и воспользуемся тремя элементами , наш HTML может выглядеть следующим образом:

Чтобы расположить эти три элемента в строку из трёх колонок, мы должны задать float для всех элементов как left . Мы также должны настроить ширину с учётом дополнительных колонок и расположить их один рядом с другим.

section

Здесь у нас есть три колонки, все с равной шириной и значением margin , а также с float , заданным как left .

Демонстрация трёхколоночного макета с float

Очистка и содержимое float

Свойство float было первоначально разработано, чтобы позволить содержимому обтекать вокруг изображений. Для изображения может быть задано float и всё содержимое вокруг этого изображения, естественно, обтекает вокруг него. Хотя это прекрасно работает для картинок, свойство float на самом деле не было предназначено для использования в макете и с целью позиционирования и, таким образом, оно идёт с несколькими ловушками.

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

Часто значения свойств margin и padding интерпретируются некорректно, заставляя их сливаться с обтекаемым элементом. Другие свойства также могут быть затронуты.

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

В нашем предыдущем примере с двумя колонками, после того как мы добавили float к элементам и , но до того как установили свойство width к любому из них, содержимое внутри элемента располагалось между двумя обтекаемыми элементами выше него, заполняя всё доступное пространство. Следовательно, элемент находился бы в промежутке между элементами и , занимая свободное место.

Демонстрация макета без очистки float

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

Очистка float

Очистка float происходит с помощью свойства clear , которое принимает несколько различных значений: наиболее часто используемые значения — left , right и both .

Значение left очищает левые float , в то время как значение right очищает правые float . Значение both , однако, очистит левые и правые float и часто является наиболее идеальным вариантом.

Возвращаясь к нашему предыдущему примеру, если мы используем свойство clear со значением both для элемента , то можем очистить float . Важно, что clear применяется к элементу, указанному после обтекаемых элементов, а не раньше, чтобы вернуть страницу в её обычный поток.

footer

Демонстрация макета с очисткой float

Содержимое float

Вместо очистки float , ещё одним вариантом является установка содержимого float . Результат получится почти такой же, однако содержимое float действительно гарантирует, что все наши стили будут отображаться надлежащим образом.

Чтобы установить содержимое float , обтекаемые элементы должны находиться внутри родительского элемента, он будет выступать в качестве контейнера, оставляя поток документа полностью обычным за его пределами. В стилях для этого родительского элемента представлен класс group , как показано здесь:

.group::before, .group::after < content: ""; display: table; >.group::after < clear: both; >.group

Здесь немного что происходит, но, по сути, всё что CSS делает — очищает все обтекаемые элементы внутри элемента с классом group и возвращает документ в обычный поток.

Более конкретно, псевдоэлементы ::before и ::after , как указано в уроке 4, динамически генерируют элементы выше и ниже элемента с классом group . Эти элементы не включают в себя какой-либо контент и отображаются как табличные элементы, подобно элементам блочным. Динамически генерируемый элемент после элемента с классом group очищает float внутри элемента с классом group , так же, как и clear ранее. И, наконец, элемент с классом group также очищает все float , которые могут появиться до него на случай, если существует float со значением left или right . Также сюда включена небольшая хитрость, которая заставляет старые браузеры играть красиво.

Здесь больше кода, чем единственная команда clear: both , но он может оказаться весьма полезным.

Рассматривая наш макет страницы с двумя колонками мы могли бы обернуть и родительским элементом. Этот родительский элемент будет содержать в себе обтекаемые элементы. Код будет выглядеть следующим образом:

.group::before, .group::after < content: ""; display: table; >.group::after < clear: both; >.group < clear: both; *zoom: 1; >section < float: left; margin: 0 1.5%; width: 63%; >aside

Демонстрация макета с содержимым float

Показанная здесь техника известна как «clearfix» и часто встречается на других сайтах с именем класса clearfix или cf. Мы решили использовать имя класса group , потому что он представляет группу элементов и лучше выражает содержимое.

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

На практике

Вернёмся к сайту Styles Conference и опробуем на нём добавление float к некоторому содержимому.

/* ======================================== Clearfix ======================================== */ .group::before, .group::after < content: ""; display: table; >.group::after < clear: both; >.group

Styles Conference

/* ======================================== Основной заголовок ======================================== */ .logo

Styles 
Conference

.logo

/* ======================================== Основной подвал ======================================== */ .primary-footer small

.primary-footer

С учётом всех этих изменений в элементах и , мы должны быть уверены, что внесли их на каждой странице, а не только на странице index.html.

Рис. 5.02. Главная страница Styles Conference теперь включает трёхколоночный макет

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Уникальное позиционирование элементов

Рано или поздно каждый пожелает точно позиционировать элемент, но float или строчно-блочные элементы не позволяют проделать такой трюк. Обтекаемые элементы, которые удаляют элемент из потока страницы, часто приводят к нежелательным результатам, поскольку окружающие элементы обтекают вокруг элемента с float . Строчно-блочные элементы, если только мы не создаём колонки, могут быть довольно неудобны, когда дело касается правильного положения. Для подобных ситуаций мы можем использовать свойство position в сочетании со свойствами смещения блока.

Свойство position определяет, как элемент позиционируется на странице и будет ли он отображаться в обычном потоке документа. Оно применяется в сочетании со свойствами смещения блока — top , right , bottom и left , которые точно определяют, где элемент будет расположен путём перемещения элемента в разных направлениях.

По умолчанию у каждого элемента значение position установлено как static , это означает, что элемент существует в обычном потоке документа и не принимает какие-либо свойства для его смещения. Значение static наиболее часто переписывается значением relative или absolute , которые мы рассмотрим дальше.

Относительное позиционирование

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

div < height: 100px; width: 100px; >.offset

Демонстрация относительного позиционирования

Здесь для второго элемента с классом offset задано значение position как relative , а также два свойства смещения — left и top . Это сохраняет исходное положение элемента и другим элементам не разрешено двигаться в эту область. Кроме того, свойства смещения перемещают элемент, выталкивая его на 20 пикселей от левого и на 20 пикселей от верхнего исходного местоположения.

Для относительно позиционированных элементов важно знать, что свойства смещения блока определяют, куда элемент будет перемещён, учитывая его исходное положение. Таким образом, свойство left со значением 20 пикселей фактически толкает элемент вправо на 20 пикселей. Свойство top со значением 20 пикселей затем будет толкать элемент вниз на 20 пикселей.

Когда мы позиционируем элемент с помощью свойств смещения, элемент перекрывает элемент под ним, а не сдвигает его вниз, как это делают свойства margin или padding .

Абсолютное позиционирование

Значение absolute для свойства position отличается от значения relative тем, что элемент с абсолютным позиционированием не появляется в обычном потоке документа, исходное пространство и положение абсолютно позиционируемого элемента не резервируется.

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

section < position: relative; >div

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

В этом примере элемент позиционируется относительно, но не включает каких-либо свойств смещения. Следовательно, его положение не меняется. Элемент с классом offset включает значение position как absolute . Поскольку элемент является ближайшим относительно позиционированным родительским элементом для , то элемент будет позиционироваться относительно элемента .

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

В результате свойств right и top , элемент появится в 20 пикселях справа и 20 пикселях сверху внутри .

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

Резюме

Изучение позиционирования содержимого в HTML и CSS является огромным шагом в сторону освоения этих языков. Добавьте к этому блочную модель и вот мы уверенно движемся по пути превращения во фронтенд-разработчиков.

Для проверки, в этом уроке мы рассмотрели следующее:

Что такое float и как его использовать, чтобы позиционировать содержимое.
Как очистить и установить содержимое обтекаемых элементов.
Как позиционировать содержимое с помощью строчно-блочных элементов.
Как удалить пустое пространство между строчно-блочными элементами.
Как уникально позиционировать контент через относительное и абсолютное позиционирование элементов.

Мы добавляем новые навыки с каждым уроком, так что давайте продолжим. Следующая тема — типографика!

Ресурсы и ссылки

CSS Float Theory via Smashing Magazine
CSS Positioning 101 via A List Apart