Как отцентрировать контент внутри блока bootstrap?
Как отцентрировать контент внутри блока bootstrap, что не так делаю? Почему justify-content: center не помогает. Вопрос к второй колонке.
.card-delivery < border: none; background-color: #fff; padding: 1rem; >.card-delivery .card-icon < width: 96px; >.card-delivery .card-title
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" /> Кто доставит?
Мы доверяем доставку зеркал нашим партнерам — транспортной компании «Стекловозов».
Куда могут привезти?
Доставка осуществляется по всей Москве и Московской области на специализированном транспорте.
В какие дни можно ждать доставку?
Доставка осуществляется круглосуточно, 7 дней в неделю, включая выходные и праздничные дни. Возможен заказ доставка в назначнный час, вплоть до ±15 минут. Воспользуйтесь этой услугой у проверенного партнера. С тарифами можно ознакомиться здесь.
Узнать цены на доставку можно тут
Как отцентрировать спрайт?
Отображается он вот так: 
Что нужно исправить, чтобы он отображался корректно: 
Отслеживать
задан 24 июл 2015 в 20:43
11 1 1 бронзовый знак
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
.apple < display: inline-block; position: absolute; background: url(../images/sprites.png) no-repeat; background-position: 0 -50px; width: 27px; height: 33px; top: 50%; left: 50%; margin-left: -13px; margin-right: -16px; >Отслеживать
ответ дан 25 июл 2015 в 1:08
136 5 5 бронзовых знаков
Нужно поправить примерно так:
.apple < display: inline-block; position: absolute; background: url(../images/sprites.png) no-repeat; background-position: 25px -25px; width: 27px; height: 33px; >Отслеживать
ответ дан 24 июл 2015 в 21:10
Maks Devda Maks Devda
667 4 4 серебряных знака 10 10 бронзовых знаков
1 вариант
* < box-sizing: border-box; >.content_two_circle < position: relative; display: block; width: 68px; height: 68px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #c5c5c5; >.content_two_circle .apple< display: inline-block; position: absolute; top: 50%; left: 50%; background: url(../images/sprites.png) no-repeat; border: 1px solid #000; background-position: 0 -50px; width: 27px; height: 33px; margin: -16.5px 0 0 -13.5px; >2 вариант
* < box-sizing: border-box; >.content_two_circle < position: relative; display: block; width: 68px; height: 68px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #c5c5c5; >.content_two_circle .apple< display: inline-block; position: absolute; top: 50%; left: 50%; background: url(../images/sprites.png) no-repeat; border: 1px solid #000; background-position: 0 -50px; width: 27px; height: 33px; -webkit-backface-visibility: visible; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); >Отслеживать
ответ дан 25 июл 2015 в 3:17
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Высота div’а в зависимости от контента
Как сделать, чтобы div был по высоте контента? Float не используется. .main находится посреди страницы ( margin: auto ).
#main
Текст1 Текст2 Текст3 Отслеживать
15.9k 8 8 золотых знаков 52 52 серебряных знака 99 99 бронзовых знаков
задан 12 мар 2017 в 9:59
Maks_Tresh Maks_Tresh
25 1 1 золотой знак 1 1 серебряный знак 5 5 бронзовых знаков
А сейчас разве не так?
12 мар 2017 в 10:01
Четыре ответа от телепатов, хех)
12 мар 2017 в 10:28
@andreymal, они попрыгали с бубном и им ответ Великий Программист ответ подсказал 🙂
12 мар 2017 в 10:43
Возможный дубликат вопроса: Высота блока в зависимости от высоты другого блока
12 мар 2017 в 10:53
display: inline-table; height: auto;
13 мар 2017 в 20:24
6 ответов 6
Сортировка: Сброс на вариант по умолчанию
при height: auto высота всегда рассчитывается в зависимости от контента. У div’а это свойство по умолчанию auto, т.е. вам нет необходимости что-то писать
Отслеживать
ответ дан 12 мар 2017 в 10:05
301 4 4 серебряных знака 13 13 бронзовых знаков
Тогда div расползается на всю высоту страницы.
12 мар 2017 в 11:05
абсурд, не может такого быть. Мы с вами явно говорим не про одно и то же, переформулируйте свой вопрос
13 мар 2017 в 13:56
Я его дополнил еще вчера. p.s. Решение L. Vadim работает, но, чтобы div с контентом находился по центру страницы (как в первоначальном варианте с фиксированной высотой), не получается.
13 мар 2017 в 14:48
Можно использовать display: table; без указания высоты:
#main
Текст1 Текст2 Текст3 Отслеживать
ответ дан 13 мар 2017 в 20:26
27.2k 2 2 золотых знака 45 45 серебряных знаков 76 76 бронзовых знаков
А зачем body ?
15 мар 2017 в 18:22
@Yuri, посмотрите в вопрос, и не задавайте глупых вопросов)
15 мар 2017 в 18:23
Я убрал там body 🙂
15 мар 2017 в 18:23
@Yuri, и все теперь должны броситься редактировать ответы?
15 мар 2017 в 18:25
Желательно. body здесь бесполезный 🙂
15 мар 2017 в 18:28
Он у вас и так по контенту:
#main < background-color: red; >#content1, #content2, #content3
Текст 1 Текст 1
Текст 2 Текст 1
Текст 2
Текст 3 Отслеживать
ответ дан 12 мар 2017 в 10:04
user238662 user238662
Добавил css в вопрос.
12 мар 2017 в 11:24
Clearfix — вспомогательный класс в css, с помощью которого мы исправляем схлопывающиеся размеры контейнера у плавающих элементов.
В CSS добавляется следующее правило:
.clearfix::after
А затем класс clearfix добавляется к контейнеру, внутри которого лежат флоатные колонки.
Без clearfix :
.container < width: 400px; margin: 20px auto; padding: 10px; box-shadow: 0 0 5px #999; border: 2px solid #34495e; >.columns - container < padding: 10px; background: #ecf0f1; border: 2px solid #34495e; >.column < width: 150px; min-height: 100px; padding: 10px; color: white; background: #3498db; border: 2px solid #34495e; >.column1 < float: left; >.column2
.column1
Первая колонка .column2 Вторая колонка C clearfix :
.container < width: 400px; margin: 20px auto; padding: 10px; box-shadow: 0 0 5px #999; border: 2px solid #34495e; >.columns - container < padding: 10px; background: #ecf0f1; border: 2px solid #34495e; >.column < width: 150px; min-height: 100px; padding: 10px; color: white; background: #3498db; border: 2px solid #34495e; >.column1 < float: left; >.column2 < float: right; >.clearfix::after
.column1
Первая колонка .column2 Вторая колонка Как отцентрировать ссылку в css
Некоторые сайты на 99% состоят из этого элемента. Универсальный строительный блок без семантического значения.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Алёна Батицкая ,
- Светлана Коробцева
Обновлено 8 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Элемент группирует или оборачивает другие элементы и семантически ничего не значит. Сам по себе без стилей ничего из себя не представляет — пользователь увидит пустое место на экране.
Можно представить этот тег как универсальную коробку. В неё можно положить что угодно или не класть ничего и просто оформить как нужно.
Пример
Скопировать ссылку «Пример» Скопировано
В этом примере абзац текста обёрнут в , которому заданы внутренние отступы и фоновый цвет:
Мы поместили текст в<div>, а сам контейнер покрасили в оранжевый.div class="container"> p> Мы поместили текст в code><div>code>, а сам контейнер покрасили в оранжевый. p> div>
.container background-color: #FF8630; padding: 55px 40px;>.container background-color: #FF8630; padding: 55px 40px; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Div — от английского division — раздел, секция.
Чтобы сделать что-нибудь полезное, надо обратиться к такому диву и добавить каких-нибудь стилей, обычно с помощью атрибута class , например: class = «my — block» в HTML и .my — block в CSS. Можно задать ширину и отцентрировать всё содержимое. Или можно задать ему какие-нибудь наследуемые стили, вроде color : tomato или font — size : 20px , и тогда эти стили применятся ко всему содержимому этого дива.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Тег парный, его всегда нужно закрывать < / div>.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� У блочные стили по умолчанию ��
�� Важно помнить, что без содержимого и стилей не видно на экране. По умолчанию он растянется на всю ширину родителя, но не будет иметь высоты, если только у него нет внутренних отступов. Положите внутрь контент или задайте стили, чтобы блок расправился по высоте.
На практике
Скопировать ссылку «На практике» Скопировано
Дока Дог советует
Скопировать ссылку «Дока Дог советует» Скопировано
�� Понять, как выглядит , несложно — это всегда прямоугольник (или в частном случае квадрат), но начинающие верстальщики умудряются неслабо накосячить с этим тегом. Я постоянно вижу ошибки в структуре вложенности блоков друг в друга.
�� Если провести аналогию между HTML-кодом сайта и человеком, то тег — это всё тело. Например, у нас есть , который обозначает руку. Логично, что внутри него должны быть , внутри них . Но некоторые умудряются сделать вложенным в и потом подвинуть его рядом, чтобы выглядело, будто «ноготь» находится на «пальце». А на самом деле он откуда-то извне прилетел вообще — отдельно лежит «ноготь» и отдельно рядом «палец». Не надо так, соблюдайте структуру ����
Вадим Макеев советует
Скопировать ссылку «Вадим Макеев советует» Скопировано
�� — самый простой и самый крутой тег во всём HTML: нет стилей — нет проблем. Если сильно извратиться, то можно написать целый сайт на одних дивах. Разве что ссылки и формы делать не всегда удобно. Даже доступность можно накрутить поверх дивов с помощью ARIA-атрибутов и кучи JS.
Но лучше не имитировать встроенные в HTML теги. Во-первых, это очень сложно. Браузеры делают много полезной магии, особенно с интерактивными элементами. Во-вторых, важно понимать, что некоторые из них могут принести неочевидную пользу для сайта: быстрее загрузка, понятнее поисковикам, доступнее скринридерам, лучше в режимах для чтения и так далее.
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Начинающие разработчики часто заболевают болезнью под названием диватоз — всегда и везде используют . На самом деле в HTML большое количество специальных тегов для разных нужд.
Например, для статей существует тег , а для дополнительной информации тег . Они ведут себя и выглядят как . Это тоже прямоугольники, в которые можно вкладывать другие блоки. Разница между ними в смысловой нагрузке.
Браузеру проще понимать, какой контент важен, когда HTML-разметка написана правильно, с использованием семантических тегов.