Html заголовок по центру: Атрибут align | htmlbook.ru

• HTML
• CSS
• адаптивный

7

Попробуйте добавить width: 100% к классу name , чтобы он занял 100% ширины родительского контейнера.

 .имя {
  выравнивание текста: по центру !важно;
  выравнивание содержимого: по центру !важно;
  ширина: 100%;
}
 

4

Вы должны изменить положение .name в медиа-запросе и установить text-align: center для .header . Таким образом, вы можете изменить весь макет для экранов с другим размером (например, в вашем примере максимум 768 пикселей). Просто убедитесь, что вы сбрасываете другие значения, которые вы установили ранее (вне медиа-запроса, например top , left и margin-left for .name ), которые вам не нужны для других размеров экрана. Вы также забыли закрыть тег медиа-запроса.

Также имейте в виду тот факт, что рекомендуется сначала разрабатывать css для мобильных устройств, а затем использовать медиа-запросы для больших экранов. https://www.browserstack.com/guide/how-to-implement-mobile-first-design

Если вы замените свой css следующим, он будет работать:

 body {
  маржа: 0;
  цвет фона: #e9e9f3;
}
/* Заголовок */
. заголовок .имя {
  положение: абсолютное;
  верх: 0,5см;
  слева: 1эм;
  поле слева: 4%;
  белый цвет;
  размер шрифта: 2em;
  семейство шрифтов: «Архив», без засечек;
}
.социальный значок-заголовок {
  положение: абсолютное;
  верх: 3эм;
  справа: 2эм;
  высота: авто;
}
 /* Планшеты и младше */
@media (максимальная ширина: 768 пикселей) {
  .социальный значок-заголовок {
      дисплей: нет;
  }
  
  .заголовок {
    выравнивание текста: по центру;
  }
  
  .заголовок .имя {
    положение: родственник;
    слева: авто;
    вверху: авто;
    маржа: 0;
  }
}
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

Как центрировать список заголовков? (V2)

5.00/5 (1 голос)

Узнать больше:

CSS

HTML5

Я пытаюсь сделать заголовок с приличным css, и что-то пошло не так: когда я тестировал это на своем локальном хосте (через XAMPP), список не центрировался посередине моего фона, а был выше.

Как решить эту проблему?

С уважением,
Андреас

    <заголовок>
        
        <ул>
          
Главная
          
О нас
          
Контакты
          
Повестка дня
          
Меню
        
 Кафе  Велком
 

        
        
    
    
 

Что я пробовал:

CSS:

заголовок
{
выравнивание текста: по центру;
позиция стиля списка: снаружи;

}
ул {
тип стиля списка: нет;
маржа: 0;
заполнение: 0;
переполнение: скрыто;
цвет фона: #333;
}

ли {
плыть налево;

}

ли а {
размер шрифта: 15px;
дисплей: блок;
белый цвет;
выравнивание текста: по центру;
отступ: 14px 16px;
текстовое оформление: нет;

}

li a:hover {
цвет фона: темный хаки;
}
стр
{
семейство шрифтов: без засечек;
цвет: светло-золотистый желто-желтый;
}

Добавить решение

---

1 раствор

Решение 1

Я сделал пару изменений. Во-первых, я убрал поля и отступы сверху, а также обернул заголовок в div с именем heading, чтобы получить эффект 100% ширины, а затем отцентрировал то, что было li как div; чтобы можно было центрировать. Кроме того, p перемещается в li, поэтому он является частью неупорядоченного списка. Чтобы получить красивый шрифт, я завернул его в промежуток.

* {
  маржа: 0;
  заполнение: 0;
}
# заголовок {ширина: 50%; поле сверху: 0px;
  поле слева: авто;
  поле справа: авто;}

#заголовок{фон: #333; ширина: 100%; высота: 50 пикселей; верхнее поле: 0px;}

заголовок
{
выравнивание текста: по центру;
позиция стиля списка: снаружи;

}
уль ли {
тип стиля списка: нет;
маржа: 0;
заполнение: 0;
переполнение: скрыто;
}

ли {
плыть налево;

}

ли а {
размер шрифта: 15px;
/*отображение: блок;*/
белый цвет;
выравнивание текста: по центру;
отступ: 14px 16px;
текстовое оформление: нет;

}


ли а: наведите {
цвет фона: темный хаки;
}
охватывать
{
семейство шрифтов: без засечек;
цвет: светло-золотистый желто-желтый;
} 

  <голова>
No related posts.