Как выровнять тексты с разной шириной с помощью css?

135
17

У меня есть раздел, который содержит текст с разной шириной.

.demo h1 {
font-size: 13px;
font-family: Roboto;
font-weight: 400;
width: 100%;
color: #707070;
text-align: justify;
}

.demo p {
font-size: 12px;
font-family: Roboto;
font-weight: 400;
width: 100%;
color: #707070;
}

.demo {
text-align: justify;
}

<div class="demo">
<h1>Dene do kontaktu</h1>
<p>Skontaktuj się</p>
<p>Tel: 500500500</p>
<p>Email: kontakt@kontakt.pl</p>
</div>

Здесь видно, что ожидается:

enter image description here

спросил(а) 2021-01-19T16:35:32+03:00 6 месяцев, 1 неделя назад
1
Решение
64

Если вы хотите text-align: center текст, используйте text-align: center, not justify. Я также немного оптимизировал ваш CSS.

.demo {
color: #707070;
font-size: 12px;
font-family: Roboto;
text-align: center;
}

.demo h1 {
font-size: 13px;
font-weight: 400;
}

.demo .tel {
color: #00bb11;
}

<div class="demo">
<h1>Dene do kontaktu</h1>
<p>Skontaktuj się</p>
<p>Tel: <span class="tel">500500500</span></p>
<p>Email: kontakt@kontakt.pl</p>
</div>

ответил(а) 2021-01-19T16:35:32+03:00 6 месяцев, 1 неделя назад
64

Если вы хотите text-align: center свой текст, вы используете свойство text-align: center.

Удалите выравнивание текста из других свойств css и отредактируйте демоверсию


.demo {
text-align: center;
}

Скрипт здесь: https://jsfiddle.net/xhe5mgc1/1/

ответил(а) 2021-01-19T16:35:32+03:00 6 месяцев, 1 неделя назад
63

Попробуйте использовать text-align: center;

ответил(а) 2021-01-19T16:35:32+03:00 6 месяцев, 1 неделя назад
45

Все, что вам нужно, это text-align: center на внешнем div и удалить выравнивание по h1.

.demo h1{
font-size: 13px;
font-family: Roboto;
font-weight: 400;
width: 100%;
color: #707070;
}

.demo p{
font-size: 12px;
font-family: Roboto;
font-weight: 400;
width: 100%;
color: #707070;
}

.demo {
text-align: center;
}

ответил(а) 2021-01-19T16:35:32+03:00 6 месяцев, 1 неделя назад
45

Вы должны изменить значение "text-align" в классе.demo to center

.demo h1 {
font-size: 13px;
font-family: Roboto;
font-weight: 400;
width: 100%;
color: #707070;
}

.demo p {
font-size: 12px;
font-family: Roboto;
font-weight: 400;
width: 100%;
color: #707070;
}

.demo {
text-align: center;
}

<div class="demo">
<h1>Dene do kontaktu</h1>
<p>Skontaktuj się</p>
<p>Tel: 500500500</p>
<p>Email: kontakt@kontakt.pl</p>
</div>

ответил(а) 2021-01-19T16:35:32+03:00 6 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема