Как выровнять элементы по левому краю css
Перейти к содержимому

Как выровнять элементы по левому краю css

  • автор:

как выровнять теги li?

введите сюда описание изображения

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

  • Работаем без предоплаты
  • скидки до 40%
  • бесплатный выезд инженера

css вот такой

 .header-content text-align: center h1 font-size: 28px line-height: 30px ul li font-size: 16px

Отслеживать
Sergey Chugun
задан 5 мая 2018 в 9:24
Sergey Chugun Sergey Chugun
1 1 1 серебряный знак 5 5 бронзовых знаков
вам ответ тоже жипегом скинуть?
5 мая 2018 в 9:32
Покажите ваш html-код и css для этого кода.
5 мая 2018 в 10:15
Если вам дали нужный ответ, то можете отметить его как Правильный
23 мая 2018 в 7:54

4 ответа 4

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

Скорее всего у вас у родительского блока стоит свойство text-align: center .

Если я правильно понял задачу то вам нужно сделать вот такую структуру html :

  • Работаем без предоплаты
  • Скидки до 40%
  • Бесплатный выезд инженера

И задать стили обёртке в css :

.wrapper < text-align: left; >.wrapper ul

Отслеживать
ответ дан 5 мая 2018 в 11:44
1,506 5 5 серебряных знаков 18 18 бронзовых знаков

теги li по умолчанию прибиты влево, видать проблема в родительском блоке ,посмотри значени text-align

Отслеживать
ответ дан 5 мая 2018 в 14:31
soul keeper soul keeper
13 3 3 бронзовых знака

Да все верно, для родительского тега стоит text-align: center потому что мне нужно выравнять h1 и баттон, и сам список я хлчу чтобы тоже был посередине, но галочки в один ряд. Если я задаю text-align: left для ul или li, он толкает мне список к левому краю, а это не нужно

5 мая 2018 в 16:42

Если я правильно понял, то это можно сделать так:

 .wrapper < text-align: center; >.wrapper ul
  • Работаем без предоплаты
  • Скидки до 40%
  • Бесплатный выезд инженера

Отслеживать
ответ дан 7 мая 2018 в 17:26
46 4 4 бронзовых знака

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

.header-content < text-align: center; >h1 < font-size: 28px; line-height: 30px; >ul < list-style: none; position: relative; display: inline-flex; flex-direction: column; align-items: center; >ul li < font-size: 16px; >ul li:before

Отслеживать
ответ дан 7 мая 2018 в 18:31
5,916 1 1 золотой знак 15 15 серебряных знаков 35 35 бронзовых знаков

  • html
  • css
    Важное на Мете
Похожие

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

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

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

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

Как выровнять элементы по левому краю css

Inline-block с абзацем

Inline-block с картинкой и абзацем

Список внутри inline-block:

Inline-block с таблицей

Номер Дата Занятие Время
1 14.янв Html и css 18:00
2 23.янв Python 18:30
3 02.фев Javascript 18:00
4 05.фев Ajax 18:30

Элементы inline-block с выравниванием по правому краю

Поскольку свойство text-align наследуется, содержимое блоков тоже прижато к правым границам.

Inline-block с текстом

Inline-block с абзацем

Inline-block с картинкой и абзацем

Список внутри inline-block:

Inline-block с таблицей

Номер Дата Занятие Время
1 14.янв Html и css 18:00
2 23.янв Python 18:30
3 02.фев Javascript 18:00
4 05.фев Ajax 18:30

Элементы inline-block с центрированием

Поскольку свойство text-align наследуется, содержимое блоков тоже центрировано.

Inline-block с текстом

Inline-block с абзацем

Inline-block с картинкой и абзацем

Список внутри inline-block:

Inline-block с таблицей

Номер Дата Занятие Время
1 14.янв Html и css 18:00
2 23.янв Python 18:30
3 02.фев Javascript 18:00
4 05.фев Ajax 18:30

Центрированные элементы inline-block с содержанием, выровненным по левому краю

Контейнеру, содержащему строчно-блочные элементы, назначено правило text-align: center. Самим элементам присвоено правило text-align: left.

Inline-block с текстом

Inline-block с абзацем

Inline-block с картинкой и абзацем

Список внутри inline-block:

Inline-block с таблицей

Номер Дата Занятие Время
1 14.янв Html и css 18:00
2 23.янв Python 18:30
3 02.фев Javascript 18:00
4 05.фев Ajax 18:30
Это пример к статье по css.
  • Прочесть статью
  • Перейти на главную страницу сайта

Выравнивание строк и столбцов. align-content¶

Свойство align-content управляет выравниванием рядов (строк и столбцов) во flex-контейнере и поэтому применяется, если свойство flex-wrap имеет значение wrap или wrap-reverse . Свойство align-content может иметь следующие значения:

  • stretch : значение по умолчанию, при котором строки (столбцы) растягиваются, занимая все свободное место
  • flex-start : строки (столбцы) выравниваются по началу контейнера (для строк — это верхний край, для столбцов — это левый край контейнера)
  • flex-end : строки (столбцы) выравниваются по концу контейнера (строки — по нижнему краю, столбцы — по правому краю)
  • center : строки (столбцы) позиционируются по центру контейнера
  • space-between : строки (столбцы) равномерно распределяются по контейнеру, а между ними образуются одинаковые отступы. Если же имеющегося в контейнере места недостаточно, то действует аналогично значению flex-start
  • space-around : строки (столбцы) равным образом распределяют пространство контейнера, а растояние между первой и последней строкой (столбцом) и границами контейнера составляет половину расстояния между соседними строками (столбцами).

Стоит учитывать, что это свойство имеет смысл, если в контейнере две и больше строки (столбца).

Например, расположение строк в начале контейнера:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
 html> head> meta charset="utf-8" /> title>Flexbox в CSS3title> style> .flex-container  display: flex; border: 1px #ccc solid; flex-wrap: wrap; height: 200px; align-content: flex-start; > .flex-item  text-align: center; font-size: 16px; padding: 10px; color: white; > .item1  background-color: #675ba7; > .item2  background-color: #9bc850; > .item3  background-color: #a62e5c; > .item4  background-color: #2a9fbc; > .item5  background-color: #f15b2a; > style> head> body> div class="flex-container"> div class="flex-item item1">Flex Item 1div> div class="flex-item item2">Flex Item 2div> div class="flex-item item3">Flex Item 3div> div class="flex-item item4">Flex Item 4div> div class="flex-item item5">Flex Item 5div> div class="flex-item item1">Flex Item 6div> div class="flex-item item2">Flex Item 7div> div class="flex-item item3">Flex Item 8div> div> body> html> 

Выравнивание строк и столбцов. align-content

Изменим стиль контейнера:

1 2 3 4 5 6 7 8
.flex-container  display: flex; border: 1px #ccc solid; flex-wrap: wrap; height: 200px; align-content: space-between; flex-direction: column; > 

И в этом случае мы получим ряд столбцов, разделенных отступами:

Как выровнять элементы по левому краю css

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

  • flex-элементы не используют все пространство flex-контейнера
  • flex-элементам требуется большее пространство, чем доступно во flex-контейнере. В этом случае элементы выходят за пределы контейнера.

Для управления этими ситуациями мы можем применять свойство justify-content . Оно выравнивает элементы вдоль основной оси — main axis (при расположении в виде строки по горизонтали, при расположении в виде столбца — по вертикали) и принимает следующие значения:

  • flex-start : значение по умолчанию, при котором первый элемент выравнивается по левому краю контейнера(при расположении в виде строки) или по верху (при расположении в виде столбца), за ним располагается второй элемент и так далее.
  • flex-end : последний элемент выравнивается по правому краю (при расположении в виде строки) или по низу (при расположении в виде столбца) контейнера, за ним выравнивается предпоследний элемент и так далее
  • center : элементы выравниваются по центру
  • space-between : если в стоке только один элемент или элементы выходят за границы flex-контейнера, то данное значение аналогично flex-start . В остальных случаях первый элемент выравнивается по левому краю (при расположении в виде строки) или по верху (при расположении в виде столбца), а последний элемент — по правому краю контейнера (при расположении в виде строки) или по низу (при расположении в виде столбца). Все оставшееся пространство между ними равным образом распределяется между остальными элементами
  • space-around : если в строке только один элемент или элементы выходят за пределы контейнера, то его действие аналогично значению center . В ином случае элементы равным образом распределяют пространство между левым и правым краем контейнера, а расстояние между первым и последним элементом и границами контейнера составляет половину расстояния между элементами.

Выравнивание для расположения элементов в виде строки:

    Flexbox в CSS3 .flex-container < display: flex; border:1px #ccc solid; >.flex-end < justify-content: flex-end; >.center < justify-content: center; >.space-between < justify-content: space-between; >.space-around < justify-content: space-around; >.flex-item < text-align:center; font-size: 1em; padding: 1.5em; color: white; >.color1 .color2 .color3 .color4 .color5 

Flex-end

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4

Center

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4

Space-between

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4

Space-around

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4

justify-content в Flexbox и CSS3

Выравнивание при расположении в виде столбцов:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *