Как поместить текст в блок в html
Для размещения текста в блочном элементе, например в тэге можно воспользоваться примером ниже.
Исходный HTML документ:
class="textbox"> Пример текста в блочном элементе. .textbox /* Добавим отступы от текста до краев блока */ padding: 20px; /* Изменим цвет фона */ background: cornsilk; /* Отобразим рамку блока */ border: 2px solid indigo ; > 
Результат:
Вписать текст в блок
1.Скажите как можно вписать текст, чтобы он не вылазил за границы независимо от размера окна браузера. Текст что бы размер уменьшался.
И как можно сделать страницу без скрола, т.е чтобы размер экрана это было 100%, и не надо был скрол. и блок был по центру страницы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
html> head> title>CSS_1/title> meta charset="utf-8" /> link rel="stylesheet" href="CSS_1.css" /> /head> body> article> Выравнивание блока /article> footer> address>www.mahe.ru/address> /footer> /body> /html>
1 2 3 4 5 6 7 8 9 10 11 12
body{ background-image:url(CSS_1.png); } article { border: solid red 5px; width: 20%; height: 20%; margin: 40% 40% 40% 40%; text-align: center; }
Текст в блоках — 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. Лорем ипсум долор Лорем ипсум долор
Лорем ипсум долор Как поместить текст в див?
Зачем всем элементам задавать фиксированную высоту? При добавлении еще текста ваша верстка будет ломаться.
Картинку и текст «beer» надо добавить фоновым изображением через css: background-image и background-repeat: no-repeat; и тогда они не будут мешать остальному тексту встать на свое место. Ну и конечно в конце нужно отцентровать текст в круге свойствами флекса.
justify-content: center; align-items: center;Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать