Ссылки на центральную панель навигации

Я не могу центрировать кнопки панели навигации. Есть ли способ сделать это в файле css? Я пробовал центрировать, но это не сработало.

HTML

<div class = "navbar">
  <a href = "#home">Home</a>
  <a href = "#news">News</a>
  <a href = "#contact">Contact</a>
</div>

CSS

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 1300px; /* Full width */
  z-index: 99999;
  text-align: center;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}

Привет, Махар, снова продолжаю. Можем ли мы побеспокоить вас, чтобы выбрать лучший ответ — или предоставить свой собственный и выбрать его — чтобы закрыть вопрос? Это помогло бы нам. Огромное спасибо

— 12.06.2019 17:11

html css web

21.02.2019 02:50

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

Ответы 6

/* Links inside the navbar */
.navbar a {
 display:inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

Я изменил ваш стиль для ".navbar a". Надеюсь, это сработает для вас.

21.02.2019 03:04

Вы будете любовь flexbox — очень простым и очень полезным.

Flexbox требует родитель и Предметы.

Вы включаете флексбокс нанаg> на родителя, а затем различные переключатели устанавливаются либо на родителя (как в случае с justify-content), либо на элементы.

Вот отличная шпаргалка для Flexbox.

Вот фантастический учебник YouTube.

ДЕМО:

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  z-index: 99999;
  text-align: center;

width: 100vw; /* Full width */
  display:flex;
  justify-content:center;
  border:5px solid yellow;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
  border:1px solid pink;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}

<div class = "navbar">
      <a href = "#home">Home</a>
      <a href = "#news">News</a>
      <a href = "#contact">Contact</a>
</div>

21.02.2019 03:06

Ты можешь использовать

<div class = "navbar">
  <div style = "display: inline-block;">
     <a href = "#home">Home</a>
     <a href = "#news">News</a>
     <a href = "#contact">Contact</a>
  </div>
</div>

21.02.2019 03:06

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

CSS:

/* Links inside the navbar */
.navbar a {
  /* float: left;  remove this property */
  display: inline-block; /* change display: block to inline-block */
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

Вы можете увидеть пример на: https://jsfiddle.net/4gy2japx/

21.02.2019 03:06

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

Попробуйте это вместо этого:

html,body {
  margin: 0; /* overwrite browser defaults */
}

.navbar{
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  z-index: 99999;
  text-align: center;
}

/* Links inside the navbar */
.navbar a {
  display: inline-block;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}

<div class = "navbar">
  <a href = "#home">Home</a>
  <a href = "#news">News</a>
  <a href = "#contact">Contact</a>
</div>

21.02.2019 03:07

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  z-index: 99999;
  text-align: center;
  margin: 0 auto;
}
.navbar ul {
	display:inline-block;
	list-style-type: none;
}
/* Links inside the navbar */
.navbar a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change background on mouse-over */
.navbar a:hover {
  background: #ddd;
  color: black;
}

<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
</head>
<body>
 <div class = "navbar">
      <a href = "#home">Home</a>
      <a href = "#news">News</a>
      <a href = "#contact">Contact</a>
    </div>
</body>
</html>

You have to remove float left and add display: inline-block;
.navbar a {
  float: left;
  display: block;

21.02.2019 03:08

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

Необычное использование CSS :after

Шикарная градиентная анимация шрифта при наведении

Javascript не найдет идентификатор/класс импортированного кода html/javascript с помощью XMLHttpRequest

CSS Scroll-Snap API?

Как создать наложение цвета на изображение?

Как анимировать содержимое с динамической шириной?

Как мне получить доступ к определенному значению в элементе <li>, используя свойство цели события?

Как не вывести меня наверх страницы с помощью анкоров?

Как определить, что раскрывающийся список должен показывать направление вверх или вниз

Измените границу после того, как я заблокирую форму в html css

Ссылки на центральную панель навигации

Ответы 6

ДЕМО:

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

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