Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 0
Регистрация: 30.12.2016
Сообщений: 5
1

Как выровнять первую строку текста по центру в CSS (задать для неё одинаковые отступы как на макете)?

27.04.2020, 13:27. Показов 305. Ответов 9

Всем привет ребята!
Подскажите пожалуйста, как выровнять первую строку текста по центру (задать одинаковые отступы слева и справа для первой строки текста)?

Вот ссылка на сайт с моим вопросом:


Вот фрагмент моего кода на html и css:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
header {
  background-color: #87509c;
  font-family: sans-serif;
  color: #ffffff;
}
    p {
  padding: 147px 97px 67px 97px;
  font-weight: bold;
  font-size: 2.63em;
  text-align: center;
  color: #f7f3ea;
}
HTML5
1
2
3
4
<header>
     <p>Hi there! We are the new kids on the block
                    and we build awesome websites and mobile apps.</p>
</header>
Подскажите, как выровнять по центру первую строку текста (задать для неё одинаковые отступы как на макете)?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
27.04.2020, 13:27
Ответы с готовыми решениями:

Как выровнять по центру вертикали в CSS?
Друзья, помогите выровнять текст в левой менюшке по центру вертикали. В Хроме всё выглядит...

Как задать отступы для текста в поле input. Браузер Firefox
Есть текстовое поле input и кнопка submit. Хочу кнопку сдвинуть на поле input, а для набираемого...

Выровнять строку текста вертикально по центру
Здравствуйте В диве .cap_contact_2 есть текст, этот текст нужно выровнять вертикально по центру -...

Как выровнять изображение по центру текста XML в android studio
&lt;LinearLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; ...

9
DrType
27.04.2020, 14:42
  #2

Не по теме:

text-align-last наоборот...

0
32 / 32 / 3
Регистрация: 22.10.2012
Сообщений: 498
27.04.2020, 15:00 3
Заяц90, тебе надо что бы текст в теге <p> отображался как у тебя указано в коде? Или что бы есть некий блок шириной 200px и высотой 100 px, а текст в нем был по центру?
Приложи картинку если есть, для понимания как должен быть текст
0
Модератор
Эксперт JSЭксперт HTML/CSS
3613 / 2528 / 1489
Регистрация: 12.07.2015
Сообщений: 6,481
Записей в блоге: 4
27.04.2020, 17:51 4
CSS
1
2
3
p:first-line{
  text-align:center;
}
0
Модератор
2636 / 1561 / 474
Регистрация: 07.09.2019
Сообщений: 2,394
27.04.2020, 18:42 5
mrtoxas, я тоже так хотел, но не работает (вероятно, работает, но не везде — не все браузеры поддерживают?).

Добавлено через 31 секунду
https://codepen.io/Berners-Lee/pen/qBOjBEG
0
Модератор
Эксперт HTML/CSS
1472 / 979 / 469
Регистрация: 13.03.2010
Сообщений: 3,607
27.04.2020, 19:23 6
DrType, поддерживают.
1
Эксперт HTML/CSS
1365 / 1133 / 492
Регистрация: 07.08.2016
Сообщений: 3,079
27.04.2020, 19:26 7
gogolik, сам псевдоэлемент то поддерживают, но вот с выравниванием проблемы. Оно работает только на браузерах с webkit движком
0
Модератор
Эксперт JSЭксперт HTML/CSS
3613 / 2528 / 1489
Регистрация: 12.07.2015
Сообщений: 6,481
Записей в блоге: 4
27.04.2020, 19:27 8
gogolik, да, но text-align не во всех пашет
0
Модератор
2636 / 1561 / 474
Регистрация: 07.09.2019
Сообщений: 2,394
27.04.2020, 19:31 9
Ясно. Значит, проблема в том, что
Note that only a limited set of properties can be applied.
Добавлено через 46 секунд

Не по теме:

Несколько опоздал с ответом

0
Модератор
Эксперт HTML/CSS
1472 / 979 / 469
Регистрация: 13.03.2010
Сообщений: 3,607
27.04.2020, 20:35 10
AlexZaw, mrtoxas, в смысле, не пашет комбинация из псевдоэлемента и text-align? Теперь понял.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.04.2020, 20:35

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Как получить первую строку,или же как обрезать все что после нее
Я делал так:Dim l As String = stri.Split(vbCr) но он мне в ответ Невозможно преобразовать значение...

Как задать отступы для каждого браузера?
Имеется такая менюшка: https://img-fotki.yandex.ru/get/25826/344226570.0/0_13dcbc_686718f0_orig ...

Выровнять фон по центру зв пределами родительского блока CSS
День добрый. Помогите решить проблемку. Уже который час бьюсь, ничего не получается. Есть...

Как в списке задать для li высоту и выровнять содержимое по вертикали?
Как в списке задать для li высоту и выровнять содержимое по вертикали? Если применить свойство...

Выровнять строку по центру
Выровнять строку по центру Assambler Работать в visual studio

Как выровнять по центру h2?
Чтоб блок с картинками был на следующей линии? &lt;div class=&quot;third&quot;&gt; &lt;div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.