Интернет-агентство BINN » Как центрировать текст с помощью div? Часть 2
Div — это общий HTML-элемент блочного уровня, который помогает разбивать веб-страницы на разделы. С помощью div и CSS можно с легкостью стилизовать макет вашего веб-сайта.
В 1-ой части нашей статьи мы подробно рассказали вам о том, что такое div, а также рассмотрели несколько способов, как центрировать текст. В этой части статьи мы продолжим делиться с вами лучшими способами.
Если вы используете свойство display, чтобы определить ваш div, как гибкий контейнер, вам нужно использовать свойство align-items с центром значений.
Давайте создадим такой же div и назовем его классом .center. Установите display на flex, чтобы сделать div гибким контейнером. Чтобы увидеть, что текст центрирован по вертикали, определите свойство height. Затем установите для свойства align-items значение center.
Есть три способа центрировать div внутри другого div.
С каждым методом вы можете центрировать div внутри div по горизонтали, вертикали или по обоим направлениям.
Чтобы центрировать div по горизонтали и вертикали внутри div на странице, вы можете использовать свойства position, top, left и margin, если вы знаете ширину и высоту div.
Для начала поместите элемент div в другой элемент div в вашем HTML. Дайте внутреннему div класс child, а внешнему div класс parent .
В вашем CSS используйте селектор класса .parent, чтобы установить высоту и ширину внешнего элемента div. Затем установите для свойства position значение relative.
С помощью селектора класса .child, вы можете стилизовать внутренний div. Установите его высоту и ширину, затем установите абсолютное положение.
Теперь установите свойства top и left на 50%. Таким образом браузер выровняет левый и верхний край div с центром родительского контейнера по горизонтали и вертикали.
Далее, установите отрицательное значение для верхнего и левого поля ровно на половину высоты и ширины дочернего элемента.
Чтобы центрировать div по горизонтали и вертикали внутри div, высота и ширина которого неизвестны, вы можете использовать свойство transform вместо свойства margin, а все остальные свойства оставить прежними.
Вам нужно повторить шаги, которые мы рассмотрели выше, чтобы создать внешний и внутренний элементы div в HTML. В своем CSS вы также можете стилизовать внешний div: установите высоту и ширину, затем установите относительную позицию .
Теперь необходимо стилизовать внутренний div. Вы можете установить для его позиции абсолютное значение, а для свойств top и left — значение 50%. Однако вы не сможете определять свойства ширины и высоты, а также свойства margin. Вместо этого вы будете использовать свойство transform, чтобы переместить дочерний элемент div на 50% вправо и вниз от краев контейнера.
- С помощью Flexbox
Вы можете центрировать div внутри div с помощью CSS Flexbox.
Для начала установите высоту HTML-кода и области тела документа на 100%. Вы можете установить высоту родительского контейнера на 100%, если хотите, чтобы он занимал всю область просмотра.
Кроме того, вам необходимо определить родительский контейнер как гибкий. Для этого установите для свойства display значение flex. Затем установите для свойств align-items и justify-content значение center. Таким образом браузер центрирует гибкий элемент по вертикали и горизонтали.
Источник: hubspot.com
Элемент в HTML
- HTML
- CSS
- CMS
- HTML
- Элемент <div>
Тег <div> представляет собой блочный элемент, с помощью которого можно отображать отдельные фрагменты содержимого в видоизменённом представлении.
Наименование тега div было взято из начала английского слова «division», что значит деление.
Внутри универсального контейнера может располагаться текст, картинки, и прочие сегменты class или id с уникальным именем селектора.
Два блока в одном контейнере
HTML <div> <div> Первый блок </div> <div> Второй блок </div> </div>
CSS
#container
{
width : 50%;
margin : 17px auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#block-01, #block-02
{
width : 100px;
height: 140px;
padding-top: 12px;
}
#block-01
{
background-color : #FC0;
float : right;
}
#block-02
{
background-color : #069;
color: #fff;
}
Блок «примечание»
HTML <div><div>Примечание:</div> Текст...</div>
..</div>
CSS
.note {
font-size: 15px;
color: #000C00;
font-family: Arial, Helvetica, sans-serif;
margin: 25px 15px 25px 15px;
padding: 10px 30px;
border: solid 1px black;
background-color: #F9AC0D;
}
.note div {
font-size: 12px;
color: #303030;
font-weight: bold;
letter-spacing: 3px;
margin-bottom: 10px;
}
© 2012 – 2023
html — Форматирование div внутри контейнера div
Задавать вопрос
спросил
Изменено 4 года, 5 месяцев назад
Просмотрено 12 тысяч раз
Я сделал простой пример, чтобы проверить это.
У меня есть одна обертка div с двумя другими элементами div внутри него, установленными на display: inline-block; . Два внутренних элемента div располагаются на одной линии, но как мне сделать так, чтобы они центрировались на половине основного div , к которому они принадлежат? Например, синее поле в середине левой части основного div и красное поле в середине правой части основного div . Код и скриншот ниже.
Кроме того, инспектор показывает ширину 204 пикселя для main-box div и даже когда я установил padding и margin на 0, внизу все еще остается зазор между синими/красными прямоугольниками и границей main-box . Как избавиться от пробела?
.box-тест {
высота: 200 пикселей;
отображение: встроенный блок;
ширина: 30%;
box-sizing: граница-коробка;
}
#синий {
цвет фона: синий;
}
#красный {
цвет фона: красный;
}
#основной ящик {
выравнивание текста: по центру;
граница: 1px сплошной черный;
} <дел> <дел> <дел>
- HTML
- CSS
2
Используйте flexbox и margin:auto для обоих элементов, и они будут центрированы, как вы хотите, и вы также избавитесь от всех проблем с пробелами:
.box-test { высота: 200 пикселей; поля:авто; ширина: 30%; box-sizing: граница-коробка; } #синий { цвет фона: синий; } #красный { цвет фона: красный; } #основной ящик { граница: 1px сплошной черный; дисплей: гибкий; }
<дел> <дел> <дел>
0
То, что вы должны использовать, это flexbox для оболочки. При определении пробелов вокруг для «горизонтального выравнивания» вы получите то, что хотите.
Подробнее о flexbox см. здесь
* {
box-sizing: граница-коробка;
}
#основной ящик {
граница: 1px сплошной черный;
дисплей: гибкий;
выравнивание содержимого: пространство вокруг;
}
.box-тест {
высота: 200 пикселей;
ширина: 30%;
}
#синий {
цвет фона: синий;
}
#красный {
цвет фона: красный;
} <дел> <дел> <дел>
0
Вы можете использовать flexbox со свойством justify-content: space-around в оболочке.
.box-тест {
высота: 200 пикселей;
ширина: 30%;
}
#синий {
цвет фона: синий;
}
#красный {
цвет фона: красный;
}
#основной ящик {
дисплей: гибкий;
выравнивание содержимого: пространство вокруг;
граница: 1px сплошной черный;
} <дел> <дел> <дел>
0
# основной ящик {
выравнивание текста: по центру;
граница: 1px сплошной черный;
размер шрифта: 0;
}
Почему так? Пожалуйста, прочитайте это:
Fighting the Space Between Inline Block Elements
Удаление пробелов между элементами HTML при использовании разрывов строк
https://jsfiddle.net /evzckd3w/
Зарегистрируйтесь или войдите в систему
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
html — Можете ли вы поместить внутри?
Задавать вопрос
спросил
Изменено 8 месяцев назад
Просмотрено 21к раз
В качестве упражнения я создаю веб-сайт для некоммерческой группы и столкнулся со странной, по крайней мере для меня, проблемой.
На моей главной странице есть белая коробка, плавающая на темно-синем фоне. В этой коробке хранится мое основное содержимое. У меня есть основное изображение, логотип, боковая панель, текст. Я пытаюсь положить в другую коробку для предстоящих новостей и событий. Я надеялся вставить скриншот своей страницы для справки, но у меня недостаточно очков репутации. Прости…
Основная область представляет собой блок div, и я пытался вставить другой для своих новостей, но не могу понять, как заставить его работать. Основное поле 900 пикселей, есть заголовок, боковая панель, изображение. Под изображением я пытаюсь вставить в это поле два столбца.
Это вообще возможно?
Я искал везде, я смотрел в CSS-Tricks, я смотрел в W3Schools Online, я смотрел здесь, но я не вижу ничего, что помогло бы мне понять, как это сделать, или даже если это возможно. Я гуглил, я гуглил, не повезло. Я уверен, что это должно быть возможно, я просто не знаю, как это сделать.
7
Итак, вы пытаетесь поместить div в div? Насколько я понял из вашего поста, это можно сделать так:
<дел> .
..
Если вы разместите дополнительную информацию, например, «живой» пример или jsfiddle.net, мы сможем помочь вам лучше.
6
Я перечисляю поток, которому я следовал, чтобы найти этот конкретный ответ, в качестве примера того, как читать документы, чтобы ответить на этот конкретный вопрос, и в качестве общей помощи тем, кто приходит сюда с этим вопросом. Все это — практика «учить других ловить рыбу» для ответов в документах. Особая помощь помогает читателю ориентироваться в документах в этом случае.
Общая помощь выступает за использование документации для ответов на собственные вопросы. Не лучше ли вам, читатель, найти свои собственные ответы в любое время дня и ночи, вместо того чтобы ждать интуиции и усилий других, чтобы ответить на каждый возникающий вопрос? Я знаю, что.
- Поиск в Google по запросу «html5 spec» показал документы html5, расположенные здесь.
- В этих документах текстовый поиск «div» обнаружил ссылку на соответствующий раздел.
- В связанном списке содержимого непосредственно под заголовком было
- «Потоковое содержимое» связано со списком элементов, которые являются потоковым содержимым.
- Здесь перечислены элементы Div, span и p.
- В примере кода из раздела div был замечен элемент div, содержащий p(aragraph)
- Элемент div может располагаться везде, где может располагаться элемент p, потому что они оба являются непрерывным содержимым.
- Элемент div допустим в любом контексте, допускающем управление потоком.
- Следовательно, элемент div может содержать элемент div.
Прочитайте документы.
Доктора не кусаются. То есть хорошо написанные документы не кусаются. Скорее, документы дают возможность своим читателям овладеть задокументированным предметом. Это верно независимо от того, является ли субъект языком или аппаратным обеспечением.
Многие документы представляют собой структурированный текст. Текстовые данные обеспечивают возможность поиска.
Структура облегчает прочтение и интерпретацию.
Документы часто
- иллюстрируют шаблоны использования, используемые экспертами (т. е. как умно выполнять общие задачи),
- указывают возможности, созданные создателем предмета (например, разработчиками языка), а
- поможет читателям избежать проблем, с которыми они еще не сталкивались.
Вы можете поместить элемент div внутрь элемента div, но как только вы это сделаете, вы сможете размещать блочные элементы (например, элементы div) только внутри первого элемента div. И если вы поместите встроенный элемент внутрь div, внутри div могут находиться только встроенные элементы. Я не уверен, в какой степени блочный элемент все еще считается блочным, потому что вы можете внести множество изменений с помощью css.
Заголовок
поле 1 с плавающей запятой влево
Плавающее левое поле 2
Плавающее левое поле 3
Нижний колонтитул
Я думаю, что вы пытаетесь сделать то, что я закодировал выше.