• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Выравнивание текста по ширине страницы CSS (Изменение горизонтального выравнивания текста на странице)
Выравнивание текста по ширине страницы CSS
Kosten
Дата: Вторник, 2019-01-15, 21:57 | Сообщение 1
Администраторы
Сообщений:24185
Награды: 56


Иногда нам нужно сделать так, чтоб контент на странице не занимал заданное место по умолчанию. А сделать так, чтоб по обеем сторонам были пролеты, и как пример, это занятость на 80% и не более. Но главное сделать так, чтоб заголовок стоял стандартно, а само описание выровнялось по центру, чтоб по сторонам были ровные отступы.

Вообщем чтоб понять сам дизайн, то вид на изображение так выглядит.



HTML

Код
<div>
<h1>ZorNet - портал для вебмастера</h1>
<p>
Здесь идет описание.
</p>
</div>


CSS

Код
h1, p {margin: 0 auto; width: 65%}
h1 {padding-bottom: 17px;}
p {padding-bottom: 15px;}

Вы сами можете самостоятельно задавать ширину.

Демонстрация
Прикрепления: 8790479.png(52.5 Kb)
Страна: (RU)
Kosten
Дата: Среда, 2019-01-16, 15:26 | Сообщение 2
Администраторы
Сообщений:24185
Награды: 56


Если вам нужно автоматически выровнять описание по сторонам, это на странице или в блоке, чтоб был пробел по обеим сторонам, то нужно прописать стиль.

Выравниваем текст одновременно по правому и левому краю

CSS

Код
p {
    text-align: justify;
   }


Сам текст размещаем.

Код
<p>Здесь идет описание.</p>


На этом все.

Демонстрация
Страна: (RU)
iHarD
Дата: Среда, 2019-01-16, 22:36 | Сообщение 3
Друзья сайта
Сообщений:78
Награды: 1


Свойство padding позволяет задать величину поля сразу для всех сторон элемента, если использовать его так:
padding: [значение px или проценты] , к примеру

Код
  padding: 20px; /* 20px - отступы */


В итоге, не нужно прописывать bottom и так далее, можно сразу сделать со всех сторон, если нужно :)
Так же, элементы можно двигать при помощи: margin, указав значение, к примеру margin-top, margin-bottom и другие. Тогда, можно выравнивать еще и элементы, однако с этим нужно быть аккуратней на адаптивных сайтах)


Бывший модератор форума uCoz, первый модератор сервиса вопрос/ответов uCoz.
Разрабатываю сайты!)
Страна: (RU)
Kosten
Дата: Четверг, 2019-01-17, 01:49 | Сообщение 4
Администраторы
Сообщений:24185
Награды: 56


Цитата iHarD ()
аккуратней на адаптивных сайтах

Если все выставлять на процентах, то по идее на адаптивность не должно повлиять.
Страна: (RU)
iHarD
Дата: Четверг, 2019-01-17, 16:32 | Сообщение 5
Друзья сайта
Сообщений:78
Награды: 1


Цитата Kosten ()
Если все выставлять на процентах, то по идее на адаптивность не должно повлиять.

Тут зависит ещё от адаптации и там, где применяется, но так по сути - да)


Бывший модератор форума uCoz, первый модератор сервиса вопрос/ответов uCoz.
Разрабатываю сайты!)
Страна: (RU)
Kosten
Дата: Четверг, 2019-01-17, 20:23 | Сообщение 6
Администраторы
Сообщений:24185
Награды: 56


Этот вариант больше для отдельных страниц, вновь созданных подходит. То иногда встречаются ресурсы, где описание написано, но как раз не одного пробела.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Выравнивание текста по ширине страницы CSS (Изменение горизонтального выравнивания текста на странице)
  • Страница 1 из 1
  • 1
Поиск: