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

По какой-то причине я не могу опубликовать образец кода, поэтому перейдите по этой ссылке, чтобы просмотреть исходный код: http://www.hgcarpentryandjoinery.com/mxjgtv/Index.html

0
J Griff 23 Окт 2018 в 19:23

2 ответа

Лучший ответ

Ниже приведен простой рабочий пример:

ul {
 list-style: none;
 margin: 0;
 padding-left: 0;
}

nav {
  background: black;
  display: flex;
  justify-content: center;
  height: 30px;
  width: 100%;
}

nav ul {
 display: flex;
 align-items: center;
}
<nav>
  <ul>
    <li><a>HOME</a></li>
  <li><a href="Videos.html">VIDEOS</a></li>
  <li><a href="Results.html">RESULTS</a></li>
  <li><a href="Tumblr.html">TUMBLR</a></li>
</li>
  </ul>
</nav>

Другие моменты:

0
Lars Schuitema 23 Окт 2018 в 16:53

Для первой панели навигации удалите свойство float и добавьте text-align:center

.navbar a {
   text-align: center;  //<---------------add this 
    display: inline;
    color: grey;
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
    text-decoration: none;
    font-family: helvetica;
    font-size: 17px;
    font-weight: bold;
}

Для второй навигации внизу добавьте просто добавьте свойство text-align

  <div style="width: 100%; height: 30px;text-align: center;">
  <a href="http://www.hgcarpentryandjoinery.com/">HG CARPENTRY</a>
  <a href="Allrightsreserved.html">ALL RIGHTS RESERVED</a>
  <a href="PrivacyPolicy.Terms.html">TERMS & CONDITIONS</a>
  <a href="PrivacyPolicy.html">PRIVACY POLICY</a>
   </div>
0
suvojit_007 23 Окт 2018 в 16:40
52953718