Как поместить текст в блок в html

Текст в блоках — HTML, CSS

Привет, нужно поместить текст и иконки в блок, а когда начинаешь их прописывать блок смещается ниже нужного уровня. Что делать?

.container < width: 1143px; margin: 0 auto; >.title_process < padding-top: 100px; >.block < margin-top: 110px; margin-left: 0 auto; white-space:nowrap; >.blue < height: 263px; width: 262px; background-color: #4eb2f7; display:inline-block; margin-right: 32px; >.violet < height: 263px; width: 262px; background-color: #c049f8; display:inline-block; margin-right: 32px; >.yellow < height: 263px; width: 262px; background-color: #f3ee23; display:inline-block; margin-right: 32px; >.red

 
 
 
Working Process
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, eveniet.
 
 
 

Отслеживать

задан 10 янв 2018 в 15:47

577 2 2 золотых знака 10 10 серебряных знаков 26 26 бронзовых знаков

Уберите маржин у кнопки или у текста/дайте паддинг нижний блоку самому.

10 янв 2018 в 15:51

Так маржина у кнопки и нет

10 янв 2018 в 15:59

паддинг блоку нижний тогда. расширьте его.у Вас стоит высота фиксированная. потому и едет

10 янв 2018 в 16:48

1 ответ 1

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

Установите для дочерних блоков vertical-align:top или middle (по ситуации)

.container < width: 1143px; margin: 0 auto; >.title_process < padding-top: 100px; >.block < margin-top: 110px; margin-left: 0 auto; white-space:nowrap; >.block__item < display:inline-block; vertical-align:top; width:263px; height:263px; margin-right:32px; >.blue < background-color: #4eb2f7; >.violet < background-color: #c049f8; >.yellow < background-color: #f3ee23; >.red

 
 
 
Working Process
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, eveniet.
 
 
 
Лорем ипсум долор 
 
Лорем ипсум долор
 
 
Лорем ипсум долор 
 
 
 

Как поместить текст в блок в html

Для размещения текста в блочном элементе, например в тэге можно воспользоваться примером ниже.

Исходный HTML документ:

 class="textbox"> Пример текста в блочном элементе. 

.textbox  /* Добавим отступы от текста до краев блока */ padding: 20px; /* Изменим цвет фона */ background: cornsilk; /* Отобразим рамку блока */ border: 2px solid indigo ; > 

Результат:

text-align

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

text-align: center | justify | left | right | inherit

text-align: center | justify | left | right | start | end

Значения

center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementById(» elementID «).style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

Как поместить текст в див?

Зачем всем элементам задавать фиксированную высоту? При добавлении еще текста ваша верстка будет ломаться.
Картинку и текст «beer» надо добавить фоновым изображением через css: background-image и background-repeat: no-repeat; и тогда они не будут мешать остальному тексту встать на свое место. Ну и конечно в конце нужно отцентровать текст в круге свойствами флекса.

justify-content: center; align-items: center;

Ответ написан более трёх лет назад

Комментировать

Нравится Комментировать