Как поместить текст в блок в css
Перейти к содержимому

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

  • автор:

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

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

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

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

text-box

Результат:

Текст в блоках — 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.
Лорем ипсум долор

Лорем ипсум долор

Лорем ипсум долор

Как сделать текст в блоке сверху страницы?

5fde16291e537527620665.png

Добрый день, как мне сделать вот такой блок сверху страницы с голубым фоном и белым текстом?

  • Вопрос задан более трёх лет назад
  • 977 просмотров

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

Решения вопроса 0

Ответы на вопрос 1

a1max

Учу html, css, js

 

Save 20% for 24 Hours ONLY! Use code JOY20

.block < position: sticky; top: 0; margin: auto; background-color: #2e89d5; text-align: center; color: #fff; padding: 5px; >.block2 < background-color: red; height: 500px; >.block3

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

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

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

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

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

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

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

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

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