• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Выравнивание текста по ширине страницы CSS (Изменение горизонтального выравнивания текста на странице)
Выравнивание текста по ширине страницы CSS
Kosten
 		Вторник, 15 Января 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Иногда нам нужно сделать так, чтоб контент на странице не занимал заданное место по умолчанию. А сделать так, чтоб по обеем сторонам были пролеты, и как пример, это занятость на 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
 		Среда, 16 Января 2019 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Если вам нужно автоматически выровнять описание по сторонам, это на странице или в блоке, чтоб был пробел по обеим сторонам, то нужно прописать стиль.

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

CSS

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


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

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


На этом все.

Демонстрация
Страна: (RU)
iHarD
 		Среда, 16 Января 2019 | Сообщение 3
Оффлайн
Vip
Сообщений:81
Награды: 1
« 24 »
Свойство padding позволяет задать величину поля сразу для всех сторон элемента, если использовать его так:
padding: [значение px или проценты] , к примеру

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


В итоге, не нужно прописывать bottom и так далее, можно сразу сделать со всех сторон, если нужно :)
Так же, элементы можно двигать при помощи: margin, указав значение, к примеру margin-top, margin-bottom и другие. Тогда, можно выравнивать еще и элементы, однако с этим нужно быть аккуратней на адаптивных сайтах)
Бывший модератор форума uCoz, первый модератор сервиса вопрос/ответов uCoz.
Разрабатываю сайты!)
Страна: (RU)
Kosten
 		Четверг, 17 Января 2019 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Цитата iHarD ()
аккуратней на адаптивных сайтах

Если все выставлять на процентах, то по идее на адаптивность не должно повлиять.
Страна: (RU)
iHarD
 		Четверг, 17 Января 2019 | Сообщение 5
Оффлайн
Vip
Сообщений:81
Награды: 1
« 24 »
Цитата Kosten ()
Если все выставлять на процентах, то по идее на адаптивность не должно повлиять.

Тут зависит ещё от адаптации и там, где применяется, но так по сути - да)
Бывший модератор форума uCoz, первый модератор сервиса вопрос/ответов uCoz.
Разрабатываю сайты!)
Страна: (RU)
Kosten
 		Четверг, 17 Января 2019 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Этот вариант больше для отдельных страниц, вновь созданных подходит. То иногда встречаются ресурсы, где описание написано, но как раз не одного пробела.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Выравнивание текста по ширине страницы CSS (Изменение горизонтального выравнивания текста на странице)
  • Страница 1 из 1
  • 1
Поиск: