Работа с текстом css: CSS — Работа с текстом

CSS — Работа с текстом

На этом уроке мы познакомимся с основными приёмами для работы с текстом с помощью средств CSS.

Задавать стили CSS к тексту можно на уровне элемента body (для всей веб-страницы), элемента p (для абзаца), элемента span (для выделенного фрагмента текста) или любого другого элемента HTML.

Основные свойства CSS для работы с текстом

1. Свойство font-size

Свойство font-size изменяет размер шрифта. Оно задаётся с помощью значения и единицы измерения (em, px, pt, %). Единицы измерения em и % являются относительными и зависят от размера шрифта установленного в документе. Единицы измерения px и pt являются абсолютными и их размер зависит от разрешения экрана. Также у данного свойства есть предопределенные значения small и larger, которые соответственно уменьшают или увеличивают текст по отношению к базовому.


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>  
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

2. Свойство font-weight

Свойство font-weight изменяет жирность шрифта. Свойство font-weight имеет 2 часто используемых значения: normal (обычное) и bold (жирное). Остальные значения используются очень редко, перечислим их: числовые от 100 до 900 с шагом 100 (100 – самое тонкое начертание, 900 – самое жирное начертание), bolder и lighter.


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>  
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

3.
Свойство font-style

Свойство font-style устанавливает тексту курсивное начертание. Оно принимает следующие значения: normal (обычное начертание шрифта), italic (курсивное начертание).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

4. Свойство font-family

Свойство font-family изменяет шрифт или список шрифтов с помощью которых отображается текст. В качестве значений свойство font-family принимает названия шрифтов (например: font-family: «Tahoma», «Arial») или предопределенные названия группы шрифтов (serif, sans-serif, monospace, fantasy, cursive).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

5.
Свойство color

Свойство color изменяет цвет шрифта. Установить цвет можно несколькими способами: #ff0000 (шестнадцатеричное значение цвета), orange (зарезервированное название цвета), rgb(120,17,90) (RGB значение).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

6. Свойство background-color

Свойство background-color можно использовать для выделения текста цветом, т.е. текст делается похожим на текст выделенный маркером. Установить цвет можно такими же способами, как и для свойства color.


<p>Lorem ipsum <span>dolor sit</span> amet</p>
<p>Lorem ipsum dolor <span>sit amet</span></p>
<p><span>Lorem</span> ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

6.
Свойство text-decoration

Свойство text-decoration можно использовать для декоративного оформления текста. В качестве значений свойства text-decoration можно использовать следующие: none (без декоративного оформления), underline (подчёркивание), overline (линия над текстом), line-through (зачёркивание), blink (эффект мигания).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Подчёркивание также можно создать с помощью свойства CSS border.


<p>Lorem ipsum <span>dolor sit</span> amet</p>
<p><span>Lorem </span>ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

7.
Свойство text-transform

Свойство text-transform управляет регистром символов. В качестве значений свойства text-transform можно использовать следующие: none (по умолчанию), lowercase (переводит все символы в строчные), uppercase (переводит все символы в прописные), capitalize (каждое слово начинается с прописного символа).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

8. Свойство white-space

При обработке текста браузер не отображает больше одного пробела между словами, а также игнорирует переносы строк, которые вы выполнили в HTML коде. При помощи свойства white-space вы можете настроить поведение браузера с помощью следующих значений: normal (по умолчанию), nowrap (не переносит текст, пока не встретит тег br), pre (отображает текст как в коде на HTML), pre-wrap (отображает все пробелы между словами и переносит текст, если он не помещается в контейнер).


<p>Lorem    ipsum 

dolor sit amet</p>
<hr>
<p>Lorem    ipsum 

dolor sit amet</p>

Lorem ipsum dolor sit amet


Lorem ipsum dolor sit amet

9. Свойство text-align

Свойство text-align предназначено для выравнивания текста в горизонтальном направлении. Значения свойства text-align указывают, что текст будет выровнен: left (по левому краю), center (по центру), right (по правому краю), justify (по ширине, т.е. одновременно по левому и правому краям).


<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>

Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius.

Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.


Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.


Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem.

Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.


Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.

10. Свойство vertical-align

Свойство vertical-align может использоваться для строчных элементов (в том числе для элементов со свойством

display:inline-block), ячеек таблицы, и предназначено для выравнивания текста по вертикали. Значения свойства vertical-align указывают, что текст будет выровнен: top (по верхнему краю строки), middle (по середине), bottom (по нижнему краю строки), baseline (значение по умолчанию, выравнивание по базовой линии), sub (текст отображается в виде нижнего индекса, как подстрочный), super (текст отображается в виде верхнего индекса, как надстрочный).


<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem <span>ipsum</span> dolor <span>sit amet</span>.</p>

Lorem ipsum dolor sit amet.


Lorem ipsum dolor sit amet.


Lorem ipsum dolor sit amet.


Lorem ipsum dolor sit amet.


Lorem ipsum dolor sit amet.

11. Свойство line-height

Свойство line-height предназначено для задания высоты строки, которая влияет на расстояние между строчками текста. В качестве значений свойства line-height можно использовать следующие: число (множитель по отношению к значению высоты строки по умолчанию), проценты (например: 120% от высоты строки по умолчанию), px (например: 16px), em (например: 3em), зарезервированное слово normal (автоматический расчёт высоты).


<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.


Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.


Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.


Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.


Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

Свойства CSS для работы с текстом

Продолжаем изучение CSS для начинающих. В этом уроке поговорим о свойствах CSS, которые отвечают за внешний вид текста страницы.

Семьдесят процентов успеха в web-дизайне при создании сайта — это умение управлять текстом и шрифтами. Пользователей интересует текстовое наполнение сайта и то, с какой легкостью читается контент, влияет на длительность пребывания пользователя на сайте. И вернется ли он еще?

Для этого необходимо уметь правильно выбирать шрифты, грамотно их совмещать, а так же правильно управлять самим текстом.

text-indent — абзац с «красной строки», назначить любому абзацу отступ

letter-spacing — регулируем расстояние между буквами в слове (можно увеличить или уменьшить)

word-spacing — регулируем расстояние между словами в предложении

text-decoration — подчеркивание, зачеркивание, надчеркивание текста

text-align — выравнивание текста

line-height — расстояние между строками в тексте (но не меньше величины текста)

text-transform — различные изменения в тексте

Самое используемое свойство css, связанное с текстом, это выравнивание текста. Например, текст страницы, которую вы сейчас читаете, выровнен по левому краю.

В html для выравнивания текста применяли атрибут align.

В CSS тоже есть свойство, которое отвечает за выравнивание текста — text-align. Это свойство может принимать четыре значения:

left — выравнивание текста по левому краю (по умолчанию)

right — выравнивание текста по правому краю

center — выравнивание текста по центру

justify — выравнивание текста по левому и правому краю (растягивание текста)

Давайте в нашем CSS-файле пропишем новый стиль для работы с текстом. Пусть это будет стиль text.

Пример:

.text {

text-align:right;

}


Если в html-коде страницы прописать какому-нибудь абзацу этот стиль, то текст этого абзаца будет выровнен по правому краю.

Пример:

<p>Текст абзаца</p>

 

Следующее свойство CSS — отступ, так называемая «красная строка».

text-indent — свойство, отвечающее за написание абзаца с «красной строки». В значении этого свойства прописываем величину отступа в пикселях или других единицах измерения.

Пример:

.text {

text-align:left;

text-indent:30px;

}

 

Далее рассмотрим свойство css

text-decoration:line-through; — зачеркивание текста

Это свойство применяется, например, при написании цен. При изменении цены старое значение зачеркиваем и прописываем новое.

Но как же нам прописать это свойство одному слову из текста, а не всему абзацу. Для этого будем использовать тег <span>. Сам по себе этот тег никаких изменений в тексте не производит, но если ему прописать какой-либо стиль… Вот для этого и необходим этот тег — для придания какого-либо стиля отдельному объекту.

Давайте создадим новый стиль (например — cherta) и пропишем ему это свойство:

Пример:

. cherta {

text-decoration:line-through;

}

Теперь в абзаце зачеркнем любое слово:

<p>Цена: <span>150руб</span>120руб</p>

 

Изучим следующее свойство css — text-transform. Это свойство позволяет проделывать абзацам некоторые трансформации.

В каждом слове абзаца первую букву можно сделать заглавной, можно сделать весь текст абзаца заглавными буквами или прописными. И все это без ручного прописывания в html-коде.

Значения свойства text-transform:

capitalize — первая буква каждого слова абзаца будет заглавной

uppercase — весь текст будет написан заглавными буквами

lowercase — весь текст будет написан прописными буквами

Создадим новый стиль со свойством text-transform


Пример:

.tr {

text-transform: capitalize;

}

Пропишем абзацу этот стиль:

<p>Первая Буква Каждого Слова Абзаца — Заглавная</p>


Можно изменять расстояние между словами в тексте. Для этого применяем свойство css:

word-spacing — величина расстояния между словами в тексте

Пример:

.tr {

text-transform: capitalize;

word-spacing: 10px;

}


Можно изменять расстояние между буквами в словах применяя свойство:

letter-spacing — величина расстояния между буквами в словах

Пример:

.tr {

text-transform: capitalize;

word-spacing: 10px;

letter-spacing: 4px;

}


И последнее свойство css, которое мы изучим, свойство применяемое для изменения расстояния между строк в тексте. Это свойство:

line-height — величина расстояния между строками в тексте

Расстояние между строками — это не расстояние от нижнего края верхней строки до верхнего края нижней строки. Здесь учитывается и высота букв, так что это расстояние между верхними (или нижними) краями строк. Имейте это ввиду.

Пример:

.tr {

text-transform: capitalize;

word-spacing: 10px;

letter-spacing: 4px;

line-height: 25px;

}

Выравнивание текста по ширине в CSS | Как работает выравнивание текста в CSS? Примеры

В следующей статье представлен обзор выравнивания текста в CSS. Свойство text-justify определяет выравнивание текста, когда для свойства text-align установлено значение «justify». Свойство text-justify всегда применяется со свойством text-align. Это свойство text-justify распределяет слова по всей строке с равными пробелами. Это свойство text-justify применимо только к тексту. Это свойство содержит 4 важных значения: auto, inter-word, inter-character и none.

Сценарий реального времени: Пока мы отображаем текст абзацев на веб-странице, он неправильно выровнен. Если мы используем свойство text-justify вместе со свойством text-align для выравнивания текста в правильном формате. Выровняйте текст с равными пробелами.

Как работает выравнивание текста в CSS?

Свойство выравнивания текста работает на основе значения, присвоенного свойству. Это свойство содержит 4 основных значения.

1. Auto

Это значение auto, которое автоматически позволяет браузеру применять подходящий стиль текста.

Синтаксис:

 Селектор
{
Выравнивание текста: авто;
} 
2. Межсловный

Обосновывается уменьшением или увеличением интервала между отдельными словами в тексте.

Синтаксис:

 Селектор
{
Выравнивание текста: между словами;
} 
3. Межсимвольный

Обосновывается уменьшением или увеличением пробела между отдельными символами в тексте.

Синтаксис:

 Селектор
{
Выравнивание текста: межсимвольное;
} 
4. None

Это значение none делает текст неизменяемым, поскольку у него нет никакого значения для выравнивания текста.

Синтаксис:

 Селектор
{
Выравнивание текста: нет;
} 

Примеры

Ниже приведены упомянутые примеры:

Пример #1

Выравнивание текста: авто Пример.

Код:

 

<голова>
Свойство выравнивания по тексту
<стиль>
.textMain {
отступ снизу: 10px;
граница: 4px пунктирная красная;
}
.textPara {
выравнивание текста: по выравниванию;
выравнивание текста: авто;
цвет: зеленый;
размер шрифта: 20px;
}
h3{
выравнивание текста: по центру;
цвет синий;
}


<тело>

Введение в выравнивание по тексту: автоматическая демонстрация

Свойство text-justify определяет выравнивание текста, когда для свойства text-align установлено значение "justify". Свойство text-justify всегда применяется со свойством text-align. Это свойство text-justify распределяет слова по всей строке с равными пробелами. Это свойство text-justify применимо только к тексту. Это свойство содержит 4 важных значения: auto, inter-word, inter-character и none. Сценарий в реальном времени: Пока мы отображаем текст абзацев на веб-странице, он неправильно выровнен. Если мы используем свойство text-justify вместе со свойством text-align для выравнивания текста в правильном формате.

Вывод:

Пример #2

Выравнивание текста: между словами Пример.

Код:

 

<голова>
Свойство выравнивания по тексту
<стиль>
.textMain {
отступ снизу: 10px;
граница: серый ребро 5px;
}
.textPara {
выравнивание текста: по выравниванию;
выравнивание текста: между словами;
цвет синий;
размер шрифта: 22px;
}
h3{
выравнивание текста: по центру;
красный цвет;
}


<тело>

Введение в выравнивание текста: демонстрация между словами

Свойство text-justify определяет выравнивание текста, когда для свойства text-align установлено значение "justify". Свойство text-justify всегда применяется со свойством text-align. Это свойство text-justify распределяет слова по всей строке с равными пробелами. Это свойство text-justify применимо только к тексту. Это свойство содержит 4 важных значения: auto, inter-word, inter-character и none. Сценарий в реальном времени: Пока мы отображаем текст абзацев на веб-странице, он неправильно выровнен. Если мы используем свойство text-justify вместе со свойством text-align для выравнивания текста в правильном формате.

Вывод:

Пример #3

Выравнивание текста: между символами Пример.

Код:

 

<голова>
Свойство выравнивания по тексту
<стиль>
.textMain {
отступ снизу: 10px;
граница: 5px пунктирная красная;
}
.textPara {
выравнивание текста: по выравниванию;
выравнивание текста: межсимвольное;
цвет: фуксия;
размер шрифта: 21px;
}
h3{
выравнивание текста: по центру;
цвет: темно-синий;
}


<тело>

Введение в выравнивание текста: межсимвольная демонстрация

Свойство text-justify определяет выравнивание текста, когда для свойства text-align установлено значение "justify". Свойство text-justify всегда применяется со свойством text-align. Это свойство text-justify распределяет слова по всей строке с равными пробелами. Это свойство text-justify применимо только к тексту. Это свойство содержит 4 важных значения: auto, inter-word, inter-character и none. Сценарий в реальном времени: Пока мы отображаем текст абзацев на веб-странице, он неправильно выровнен. Если мы используем свойство text-justify вместе со свойством text-align для выравнивания текста в правильном формате.

Вывод:

Пример #4

Выравнивание текста: нет Пример.

Код:

 

<голова>
Свойство выравнивания по тексту
<стиль>
.textMain {
отступ снизу: 10px;
граница: 5px сплошной коричневый;
}
.textPara {
выравнивание текста: по выравниванию;
выравнивание текста: нет;
черный цвет;
размер шрифта: 21px;
}
h3{
выравнивание текста: по центру;
оранжевый цвет;
}


<тело>

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

Свойство text-justify определяет выравнивание текста, когда для свойства text-align установлено значение "justify". Свойство text-justify всегда применяется со свойством text-align. Это свойство text-justify распределяет слова по всей строке с равными пробелами. Это свойство text-justify применимо только к тексту. Это свойство содержит 4 важных значения: auto, inter-word, inter-character и none. Сценарий в реальном времени: Пока мы отображаем текст абзацев на веб-странице, он неправильно выровнен. Если мы используем свойство text-justify вместе со свойством text-align для выравнивания текста в правильном формате.

Вывод:

Заключение

Выравнивание текста используется для выравнивания с равными интервалами и шириной. Это свойство допускает 4 значения, такие как auto, inter-word, inter-character и none. Это свойство text-justify всегда разрешает свойство text-align.

Рекомендуемые статьи

Это руководство по выравниванию текста в CSS. Здесь мы обсуждаем введение, как работает выравнивание текста в CSS? и примеры соответственно. Вы также можете ознакомиться со следующими статьями, чтобы узнать больше –

  1. Поле CSS справа
  2. Дизайн заголовка CSS
  3. хитрости CSS
  4. Заказ CSS

html — выравнивание текста: по центру; не работает

спросил

Изменено 11 месяцев назад

Просмотрено 79 тысяч раз

Я возился с макетом моего веб-сайта и моими выравнивание текста: по центру; перестал работать это произошло после того, как я установил все свои позиции div относительно, чтобы изменить размер родительского div, когда я добавляю к нему компоненты с помощью javascript.

Вот оба моих файла CSS:

Вы можете увидеть новый по ссылке JSfiddle ниже.

jsFiddle: http://jsfiddle. net/2WvrV/

Я также предоставляю код для старого веб-сайта (который правильно выравнивает текст):

http://jsfiddle.net/fiddlerOnDaRoof/fQpjX/

старый HTML очень похож на новую версию, которую я только что добавил в один из div

  • html
  • css

2

Краткий ответ: ваш текст не центрирован, потому что элементы плавающие, а плавающие элементы «сжимаются» до содержимого, даже если это элемент блочного уровня.

Не могли бы вы подробнее объяснить, что это значит?

Мне пришлось установить все мои позиции относительно, чтобы изменить родительский элемент div размер, когда я добавляю к нему компоненты с помощью javascript

1

Куда угодно float:left; в CSS, добавьте width: 100%; после него. Плавающее убьет желаемое выравнивание по центру.

Также добавьте text-align: center; to #login

Наконец разобрался. Все, что мне нужно было сделать, это добавить ясно:лево; на мой loginBttn div после этого все заработало нормально

спасибо за попытку всем помочь

Вот еще один случай, почему Text-align: center не работает.

Вы используете свойство display:flex в Div выше, поэтому вам нужно удалить это, а затем попробовать, это сработает.

1

Вы забыли добавить ширину: 100%; в вашем классе CSS.

Я только что взглянул на ваш код и увидел, что все элементы должны быть правильно расположены, например:

 element{
    выравнивание текста: по центру;
};
 

где как у вас было:

 элемент{
    выравнивание текста: по центру;
};
 

Кроме того, у вас есть некоторые орфографические ошибки:

 элемент{
    Magin-Left: 9px;
};
 

Где это должно быть:

 элемент{
    поле слева: 9px;
};
 

попробуй.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *