Как центрировать меню на странице вместо того, чтобы оно было слева - PullRequest
Новая
       21

Как центрировать меню на странице вместо того, чтобы оно было слева

1 голос
/ 03 июня 2019

Я использовал этот инструмент для создания меню: https://www.cssportal.com/css3-menu-generator/ Это прекрасно работает, за исключением того, что меню выровнено по горизонтали по левому краю страницы.

Я попытался обернуть содержимое вdiv и используйте выравнивание текста.Я пытался использовать left и margin-left, но последний пункт меню переходит к следующей строке.

Чего я хочу добиться, так это чтобы все меню находилось посередине страницы (по горизонтали).

текст ссылки 

#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 4px 6px;
  height: 40px;
  line-height: 100%;
  background: #FFFFFF;
  border: solid 0px #FFFFFF;
  position: relative;
  z-index: 999;
}

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  float: left;
  position: relative;
  list-style: none;
}

#menu-bar a {
  font-weight: normal;
  font-family: arial;
  font-style: normal;
  font-size: 17px;
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 8px;
}

#menu-bar .active a,
#menu-bar li:hover>a {
  background: #FFFFFF;
  color: #FA550F;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#menu-bar {
  display: inline-block;
}

html[xmlns] #menu-bar {
  display: block;
}

* html #menu-bar {
  height: 1%;
}
<ul id="menu-bar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">About</a></li>
</ul>

Ответы [ 7 ]

1 голос
/ 03 июня 2019

Я отредактировал CSS для достижения результата. 

#menu-bar {
  /* display: inline-block;*/
  display: block;
  text-align: center;
}

Я изменил свойство отображения #menu-bar на display: block; и чтобы сделать ссылку внутри него в центре, использовали text-align: center;. Но этого будет недостаточно для создания центра ссылок, поэтому я сделал следующее редактирование. 

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  /**float: left;**/
  position: relative;
  list-style: none;
  display: inline-block;
}

float:left фактически заставляет элементы ссылки влево, поэтому я опустил его и сделал его встроенным элементом с display: inline-block;. 

#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 4px 6px;
  height: 40px;
  line-height: 100%;
  background: #FFFFFF;
  border: solid 0px #FFFFFF;
  position: relative;
  z-index: 999;
}

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  /**float: left;**/
  position: relative;
  list-style: none;
  display: inline-block;
}

#menu-bar a {
  font-weight: normal;
  font-family: arial;
  font-style: normal;
  font-size: 17px;
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 8px;
}

#menu-bar .active a,
#menu-bar li:hover>a {
  background: #FFFFFF;
  color: #FA550F;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#menu-bar {
  /*display: inline-block;*/
  display: block;
  text-align: center;
}

html[xmlns] #menu-bar {
  display: block;
}

* html #menu-bar {
  height: 1%;
}
<ul id="menu-bar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">About</a></li>
</ul>
0 голосов
/ 03 июня 2019

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

.center-children {
  text-align: center;
}

Вы можете центрировать элемент уровня блока, задавая его поля left-left и margin-right для auto(и он имеет заданную ширину, в противном случае это будет полная ширина и не потребуется центрирование).Это часто делается с помощью сокращения: 

.center-me {
  margin: 0 auto;
}

Я рекомендую всем этой статье https://css -tricks.com / centering-css-complete-guide /

0 голосов
/ 03 июня 2019

просто измените # стиль строки меню: 

#menu-bar {
display: flex;
justify-content: center;
align-items: center
}

скриншот:

enter image description here

0 голосов
/ 03 июня 2019

В качестве опции добавьте свойство выравнивания текста в контейнер: 

    #menu-bar {
    width: 95%;
    margin: 0px 0px 0px 0px;
    padding: 6px 6px 4px 6px;
    height: 40px;
    line-height: 100%;
    background: #FFFFFF;
    border: solid 0px #FFFFFF;
    position: relative;
    z-index: 999;
    text-align: center;
}

и измените стили на 


#menu-bar li {
    margin: 0px 0px 8px 0px;
    padding: 0px 20px 0px 4px;
    list-style: none;
    display: inline-block;
}
0 голосов
/ 03 июня 2019

Попробуйте использовать diplay: flex, чтобы выполнить выравнивание легко.Это пример кода

HTML 

<div class="flex">
<ul id="menu-bar">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">About</a></li>
</ul>
</div>

CSS 

#menu-bar {
  height: 40px;
  line-height: 100%;
  background: #FFFFFF;
  border: solid 0px #FFFFFF;
  position: relative;
  z-index: 999;
}

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  float: left;
  position: relative;
  list-style: none;
}

#menu-bar a {
  font-weight: normal;
  font-family: arial;
  font-style: normal;
  font-size: 17px;
  color: #000000;
  text-decoration: none;
  display: block;
  padding: 6px 20px 6px 20px;
  margin: 0;
  margin-bottom: 8px;
}
#menu-bar .active a, #menu-bar li:hover > a {
  background: #FFFFFF;
  color: #FA550F;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}

#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/6z483d7n/

0 голосов
/ 03 июня 2019

Подать заявку на menu-bar CSS: 

margin: 0 auto;

Или: 

left: 50%;

Кроме того, добавить menu-bar li CSS: 

display: inline-block;
0 голосов
/ 03 июня 2019

Вы должны добавить text-align: center;# строка меню, удалить поплавок: слева;из # строки меню li и добавьте отображение: inline-block;

Правильный код: 

#menu-bar {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 4px 6px;
  height: 40px;
  line-height: 100%;
  background: #FFFFFF;
  border: solid 0px #FFFFFF;
  position: relative;
  z-index: 999;
  text-align: center;
}

#menu-bar li {
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 4px;
  position: relative;
  list-style: none;
  display: inline-block;
}
...