Текст не центрируется в заголовке

Я пытался сделать так, чтобы текст «Заголовок» был по центру, а значок оставался.

text-align: center; у меня не подойдет.

Кто-нибудь может вести меня в правильном направлении?

Спасибо.

IMG:

Текст не центрируется в заголовке

    .header {
      padding-top: 15px;
      padding-bottom: 15px;
      color: #fff;
      background: #333;
    }
    
    .header a {
      text-align: center;
      text-decoration: none;
      color: #fff;
      font-size: 32px;
      vertical-align: middle; 
    }
    
    #hamburger {
      color: white;
      font-size: 32px;
    }
    
    .menu {
      display: inline-block;
    }

<div class = "headerwrapper">
      <div class = "header">
    
      <div class = "menuWrap">
        <div class = "menu open">
          <span id = "hamburger" class = "fas fa-bars hvr-grow"></span>
        </div>
          <a href = "index.php">Header</a>
      </div>
      </div>
    </div>

Пожалуйста, не могли бы вы показать нам CSS для класса menuWrap, потому что именно там вы захотите сделать text-align = center (а не в тексте привязки, длина которого равна только содержимому заголовка).

— 18.04.2018 15:13

html css

18.04.2018 15:08

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

411

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы должны поместить выравнивание текста: центр в свой класс .header.

В дополнение к этому вы также должны поместить свойство float:left; в класс .menu.

Вот пример:

    .header {
      padding-top: 15px;
      padding-bottom: 15px;
      color: #fff;
      background: #333;
      text-align:center;
    }
    
    .header a {
      text-align: center;
      text-decoration: none;
      color: #fff;
      font-size: 32px;
      vertical-align: middle; 
    }
    
    #hamburger {
      color: white;
      font-size: 32px;
    }
    
    .menu {
      display: inline-block;
      float:left;
    }

<div class = "headerwrapper">
      <div class = "header">
    
      <div class = "menuWrap">
        <div class = "menu open">
          <span id = "hamburger" class = "fas fa-bars hvr-grow">a</span>
        </div>
          <a href = "index.php">Header</a>
      </div>
      </div>
    </div>

Это будет центрировать весь заголовок, а значит, и гамбургер-меню. Это не отвечает на вопрос OP.

— 18.04.2018 15:15

18.04.2018 15:12

.header {
    padding-top: 15px;
    padding-bottom: 15px;
    color: #fff;
    background: #333;
    text-align: center;
}

.header a {
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 32px;
  vertical-align: middle; 
}

#hamburger {
  color: white;
  font-size: 32px;
}


.menu {
    display: inline-block;
    vertical-align: middle;
    float: left;
    padding: 0 0 0 15px;
}

<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity = "sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin = "anonymous">

<div class = "headerwrapper">
      <div class = "header">
    
      <div class = "menuWrap">
        <div class = "menu open">
          <span id = "hamburger" class = "fas fa-bars hvr-grow"></span>
        </div>
          <a href = "index.php">Header</a>
      </div>
      </div>
    </div>

18.04.2018 15:13

Вам нужно добавить выравнивание текста в свой класс заголовка .header, он должен выглядеть примерно так

 .header {
      padding-top: 15px;
      padding-bottom: 15px;
      color: #fff;
      background: #333;
       text-align: center;
    }

18.04.2018 15:13

Ответ принят как подходящий

Центрирование может быть выполнено с помощью text-align: center; на .header.

Однако это также повлияет на ваш значок гамбургера (который я заменил на «X» ниже, чтобы сделать его видимым), поэтому примените position: absolute к его контейнеру .menu и используйте параметр left для определения расстояния от левой границы:

.header {
      padding-top: 15px;
      padding-bottom: 15px;
      color: #fff;
      background: #333;
      text-align: center;
    }
    
    .header a {
      text-align: center;
      text-decoration: none;
      color: #fff;
      font-size: 32px;
    }
    
    #hamburger {
      color: white;
      font-size: 32px;
    }
    
    .menu {
      position: absolute;
      left: 30px;
    }

<div class = "headerwrapper">
      <div class = "header">
    
      <div class = "menuWrap">
        <div class = "menu open">
          <span id = "hamburger" class = "fas fa-bars hvr-grow">X</span>
        </div>
          <a href = "index.php">Header</a>
      </div>
      </div>
    </div>

Это отлично работает на настольных компьютерах, однако на мобильных устройствах текст по-прежнему не выравнивается.

— 18.04.2018 15:23

Тогда, скорее всего, у вас есть другие правила CSS для мобильной версии в медиа-запросах, которые вы не публиковали (?)

— 18.04.2018 15:25

Не обращайте внимания на мой последний комментарий, я забыл удалить медиа-запрос. Спасибо!

— 18.04.2018 15:25

18.04.2018 15:19

Изменить так:

.header a { 
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  //Other css...
}

    .header {
      padding-top: 15px;
      padding-bottom: 15px;
      color: #fff;
      background: #333;
    }
    
    .header a {
      text-align: center;
      text-decoration: none;
      color: #fff;
      font-size: 32px;
      vertical-align: middle; 
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }
    
    #hamburger {
      color: white;
      font-size: 32px;
    }
    
    .menu {
      display: inline-block;
    }

<div class = "headerwrapper">
  <div class = "header">

  <div class = "menuWrap">

    <div class = "menu open">
      <span id = "hamburger" class = "fas fa-bars hvr-grow">Icon</span>
    </div>

      <a href = "index.php">Header</a>

  </div>
  </div>
</div>

18.04.2018 15:28

Другие вопросы по теме

Как автоматически ставить "читать дальше", когда персонаж набирает X

Как разработать макет из четырех столбцов с использованием CSS, только если ширина столбцов будет переменной?

Как установить внутренний div в центре и расширяться одинаково сверху и снизу в зависимости от размера содержимого

Изображения не складываются по столбцам в строке в bootstrap 4.0

Измените положение кнопки вверх

Убрать переход и задержку элемента Bootstrap 4 Collapse

Как выделить каждую вторую строку с помощью%?

Обработка вертикальной строки меню для отзывчивых экранов

Как скрыть текст за элементом с фиксированной позицией в HTML

Как удалить курсор dropMenu в Bootsfaces?

Текст не центрируется в заголовке

Ответы 5

Другие вопросы по теме

Похожие вопросы