如何在导航条上将div居中(不使用空格间隔)

Question

我想将导航栏上的R居中，使其刚好在多边形的顶端。但我做不到，文字有时会消失。另外，也许我的剪切路径很尴尬，我承认我真的不知道 :(

如果有人有办法，先谢谢你^^。

EDIT: 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%;
}

Answer 1

将此添加到你的css中

.logoCentre h1 {
  line-height: 1;
  margin: 50% 0;
}

Answer 2

我找到了比flex更合适的解决方案。位置：相对 ＆amp; 绝对的 与 正确的 ＆amp; 左这是我的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;
}

Answer 3

我只是添加了一个 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>