0

Только начал изучать html и css. Пытаюсь по гайду на ютубе сделать так, чтобы текст был не возле левого края, а ближе к середине. Переписал все в точности, как на видео, но все равно текст у левого края

.container {
  width: 100%;
  min-width: 1170px;
  margin: 0 auto;
}
<body>
  <header class="header">
    <div class="container">
      affsd
    </div>
  </header>
</body>

Как у меня:

введите сюда описание изображения

Как у него:

введите сюда описание изображения

2 ответа 2

0

способ 1:

используйте text-align: justyfy

способ 2:

используйте padding-left: только для этого надо скорректировать ширину или явно (смотри пример) или включив box-sizing: content-box чтобы в ширине не учитывался отступ

.center {
  width:      250px;
  height:     30px;
  border:     1px solid black;
  
  text-align: center;
}

.no-center {
  width:      calc(250px - 50px);
  height:     30px;
  border:     1px solid black;
  
  padding-left: 50px;
}
<div class = 'center'>ТЕКСТ</div>

<br>

<div class = 'no-center'>ТЕКСТ</div>

0

Выровнять по центру можно, добавив блоку с классом container такой стиль: text-align: center;. Данная строка означает следующее: выровнять текст внутри блока с классом container по центру. Строка margin: 0 auto; выставляет отступы снаружи (в данном случае справа и слева) блока с классом container. Данную команду уместно использовать для выравнивания текста только в том случае, если размер блока, в котором находится текст, соответствует размеру текста. Для изучения можете попробовать (хотя в данном случае размер блока будет не совсем по размеру текста, просто для примера):

.container{
    width: 50px;
    margin: 0 auto;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.