Как центрировать div в navbar (не с пробелом) - PullRequest
0 голосов
/ 25 апреля 2020

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

Если у кого-то есть идея, заранее спасибо ^^

РЕДАКТИРОВАТЬ: 18:51 -> Я изменил свой путь к клипу из-за неправильного размера. HTML:

<div class="navbar">
        <div class="clubBar">
            <nav>
                <ul><li><a class="navbarLink" href="https://club.rosewood-rp.net/">Se connecter au club</a></li></ul>
            </nav>
        </div>
        <div class="logoCentre">
            <h1 class="Rlogo">R</h1>
        </div>
        <div class="rightNavbar">
            <nav>
                <ul>
                    <li><a class="navbarLink" href="index.php"><i class="fas fa-home"></i> Acceuil</a></li>
                    <li><a class="navbarLink" href="discover.php"><i class="fas fa-trees"></i> Découvrir le serveur</a></li>
                    <li><a class="navbarLink" href="news.php"><i class="fas fa-newspaper"></i> Actualité</a></li>
                    <li><a class="navbarLink" href="https://steamcommunity.com/sharedfiles/filedetails/?id=825396450"><i class="fab fa-steam"></i> Workshop</a></li>
                    <li><a class="navbarLink" href="https://discord.gg/zj9Nmqt"><i class="fab fa-discord"></i> Discord</a></li>
                </ul>
            </nav>
        </div>
    </div>

CSS:

.navbar {
  background-color: #111111;
  width: 100%;
  height: 10vh;
  clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);

  color: white;
  font-family:"Loew Bold";
  font-size:16px;
  font-style:normal;
  display: flex;
  flex: auto;
  justify-content: space-between;
}

/* Barre de naviguation gauche */

.clubBar {
  border-radius: 5px;
  padding: 0.4%;
}

/* Barre de naviguation droite */
.logoCentre {
  color: white;
  font-family: "Posterama 2001 W04 Black";
  font-size: 4vh;
  background: -webkit-linear-gradient(#c80000, #ed1c24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Barre de naviguation droite */
.rightNavbar {
  border-radius: 5px;
  padding: 0.4%;
}

Ответы [ 3 ]

0 голосов
/ 25 апреля 2020

Добавьте это к вашему css

.logoCentre h1 {
  line-height: 1;
  margin: 50% 0;
}
0 голосов
/ 26 апреля 2020

Я нашел другое решение, чем flex. Я использовал положение: относительное & абсолютное с правым & левым . Вот мой css:

.navbar {
  background-color: #111111;
  width: 100%;
  height: 10vh;
  clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0);

  color: white;
  font-family:"Loew Bold";
  font-size:16px;
  font-style:normal;

  position: relative;
  align-items: center;
  text-align: center;
  display: inline-block;
}

/* Barre de naviguation gauche */

.clubBar {
  border-radius: 5px;
  padding: 0.4%;
  position: absolute;
  left: 1vh;
}
.clubBar:hover{
  background: linear-gradient(#707070, #4f4f4f);
}
.clubBar a { 
  color:white;
  font-size: 2vh;
  margin: 0 0.5vw;
  list-style-type: none;
}
.clubBar a:link {
  font-family: "DINNextLTPro-Condensed";
  color: white;
  text-decoration: none;
}

/* Barre de naviguation droite */
.logoCentre {
  color: white;
  font-family: "Posterama 2001 W04 Black";
  font-size: 4vh;
  background: -webkit-linear-gradient(#c80000, #ed1c24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  line-height: 0px;
  left: 50%;
}

/* Barre de naviguation droite */
.rightNavbar {
  border-radius: 5px;
  padding: 0.4%;
  position: absolute;
  right: 1vh;
}
.rightNavbar ul {
  margin: 0;
  padding: 0;
  display: flex;
}
.rightNavbar li{
  list-style-type: none;
   margin: 0 0.5vw;
   font-size: 2vh;
}
.navbarLink:hover{
  background: linear-gradient(#707070, #4f4f4f);
}
.rightNavbar a { color:white }
.rightNavbar a:link {
  font-family: "DINNextLTPro-Condensed";
  color: white;
  text-decoration: none;
}
0 голосов
/ 25 апреля 2020

Я только что добавил line-height: 0 в ваш logoCentre класс, скажите, было ли это то, что вы искали!

.navbar {
  background-color: #111111;
  width: 100%;
  height: 50vh;
  clip-path: polygon(0 15%, 0 0, 100% 0, 100% 15%, 50% 25%);

  color: white;
  font-family:"Loew Bold";
  font-size:16px;
  font-style:normal;
  display: flex;
  flex: auto;
  justify-content: space-between;
}

/* Barre de naviguation gauche */

.clubBar {
  border-radius: 5px;
  padding: 0.4%;
}

/* Barre de naviguation droite */
.logoCentre {
  color: white;
  font-family: "Posterama 2001 W04 Black";
  font-size: 4vh;
  background: -webkit-linear-gradient(#c80000, #ed1c24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 0;
}

/* Barre de naviguation droite */
.rightNavbar {
  border-radius: 5px;
  padding: 0.4%;
}
<div class="navbar">
        <div class="clubBar">
            <nav>
                <ul><li><a class="navbarLink" href="https://club.rosewood-rp.net/">Se connecter au club</a></li></ul>
            </nav>
        </div>
        <div class="logoCentre">
            <h1 class="Rlogo">R</h1>
        </div>
        <div class="rightNavbar">
            <nav>
                <ul>
                    <li><a class="navbarLink" href="index.php"><i class="fas fa-home"></i> Acceuil</a></li>
                    <li><a class="navbarLink" href="discover.php"><i class="fas fa-trees"></i> Découvrir le serveur</a></li>
                    <li><a class="navbarLink" href="news.php"><i class="fas fa-newspaper"></i> Actualité</a></li>
                    <li><a class="navbarLink" href="https://steamcommunity.com/sharedfiles/filedetails/?id=825396450"><i class="fab fa-steam"></i> Workshop</a></li>
                    <li><a class="navbarLink" href="https://discord.gg/zj9Nmqt"><i class="fab fa-discord"></i> Discord</a></li>
                </ul>
            </nav>
        </div>
    </div>
...