Элементы панели навигации по центру

#html #css #zoho

#HTML #css #zoho

Вопрос:

Я пытаюсь центрировать элементы «subnav-content a».

Ниже приведен фрагмент HTML-кода.

 <div class="navbar">
  <a href="https://creatorapp.zoho.com.au/zeroasbestos_outlook/compliance/#Page:Employees">Employee Details</a>
  <div class="subnav">
    <button class="subnavbtn">Employment Contracts<i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="https://creatorapp.zoho.com.au/zeroasbestos_outlook/compliance/#Page:Employment_Contracts">Full-time</a>
      <a href="https://creatorapp.zoho.com.au/zeroasbestos_outlook/compliance/#Page:Part_time_Employment_Contracts">MV Part-time</a>
      <a href="https://creatorapp.zoho.com.au/zeroasbestos_outlook/compliance/#Page:Casual_Employment_Contracts">Pamp;E Casual</a>
    </div>
  </div>

Вот фрагмент CSS, который у меня есть:

 .subnav-content {
  display: none;
  position: absolute;
  left: 0;
  align: center;
  background-color: #35335d;
  color: white;
  width: 100%;
  z-index: 1;
}

.subnav-content a {
  float: center;
  color: white;
  text-decoration: none;
}

Пока у меня есть две панели навигации. Основная панель навигации, которая при наведении курсора мыши на кнопку открывает панель subnav, но элементы панели subnav упорно остаются слева. Я бы хотел, чтобы они были в центре. Я уже пробовал несколько вещей, но у меня это не совсем работает.

1. Css недоступен с float: center; помощью, вы можете использовать text-align: center; или с другим css, например -webkit-box-align: center;-ms-flex-align: center; align-items: center;text-align: center;

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

3. Можете ли вы отредактировать его с помощью snippet run? Потому что я не совсем понимаю вашу проблему.

Ответ №1:

у нас нет float центра. float это просто left или right . Вы можете использовать это

 .subnav-content a {
position: absolute;
left: 0;
right: 0;

}

1. Он центрировал элементы в вспомогательной навигационной панели, но они были лишены там цветов и перекрывали друг друга. Есть идеи?

2. Что вы имеете в виду?

3. Все элементы панели навигации расположены по центру и перекрывают друг друга. Цвет фона каждого элемента удаляется, и остается только белый текст.

4. Вы также можете использовать flexbox, я не занимаюсь этим, но я знаю, что это решит вашу проблему

Ответ №2:

Я все разобрал. Мне пришлось обернуть его в другой div и создать пользовательский класс столбцов.

 .column {
  float: left;
  width: 50%;
  padding: 1px;
  
  }
  
  .column1 {
  float: left;
  width: 25%;
  padding: 1px;
  }