html - Flex-end 和 start 不垂直对齐

Question

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: white;
}

.zindex {
    position: absolute;
    left: 50%;
    top: 15px;
    z-index: 2;
}
#logo {
  padding-bottom: 20px;
}
.center {
  display: flex;
  align-self: center;
}
.bodyclass {
  background-color: #05426E;
  height: 160px;
}

.content-container {
  border-style: solid;
  border-width: 5px;
  margin-top: 5%;
  margin-left: 15%;
  margin-right: 15%; 
  margin-bottom: 15%; 
}

.footer-container {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}
#flexstart {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#flexend {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.centernav {
  display: flex;
  justify-content: center;
  justify-items: center;
  justify-self: center;
  text-justify: center;
}
.snip1226 {
  font-family: 'Raleway', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  color: black;
}
.snip1226 * {
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  color: black;
}
.snip1226 li {
  list-style: outside none none;
  margin: 0 1.5em;
  overflow: hidden;
  color: black;

}
.snip1226 a {
  padding: 0.3em 0;
  position: relative;
  display: inline-block;
  letter-spacing: 1px;
  margin: 0;
  color: white;
  text-decoration: none;
}
.snip1226 a:before,
.snip1226 a:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1226 a:before {
  bottom: 100%;
  display: block;
  height: 3px;
  width: 100%;
  content: "";
  background-color: #FCDA18;
}
.snip1226 a:after {
  padding: 0.3em 0;
  position: absolute;
  bottom: 100%;
  left: 0;
  content: attr(data-hover);
  white-space: nowrap;
}
.snip1226 li:hover a,
.snip1226 .current a {
  transform: translateY(100%);
}

import React from 'react';
import logo from "./logo.gif";
const Navbar = () => {
  return <div className="bodyclass">
      
    <header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
        <nav class="f6 fw6 ttu tracked">
        <div>
          <ul id='flexstart' class="snip1226">
            <li><a href="#" data-hover="Home" className='pr5 pl5'>Home</a></li>
            <li><a href="#" data-hover="About Us">About Us</a></li>
            <li><a href="#" data-hover="Blog">Blog</a></li>
            <img src={logo} height="125px" className='zindex' />
          </ul>
          <div id='flexend'>
          <ul id='flexend' class="snip1226">
            <li><a href="#" data-hover="Home" className='centernav'>Home</a></li>
            <li><a href="#" data-hover="About Us">About Us</a></li>
            <li><a href="#" data-hover="Blog">Blog</a></li>
          </ul>
          </div>    
        </div>
        </nav>
      </header>
        
    </div>;
}
export default Navbar;

react

我试图将列表项水平居中，但无论我用 CSS 做什么，它仍然是那样。我知道它与 flex-end 和 flex-start 有关，但我不知道如何将它居中。我已经尝试了 align 和 justify 属性，但它似乎没有做任何事情。

我还想补充一点，我希望所有元素都在导航栏居中的一行中。我必须在它们之间留出空间，因为 Logo 位于中间。

Answer 1

要使列表(菜单)的内容水平居中，可以通过对 CSS 进行以下调整来实现:

#flexstart {
  display: flex;
  /* justify-content: flex-start; Remove */
  justify-content: center;
  align-items: center;
}

#flexend {
  display: flex;
  /* justify-content: flex-end; Remove */
  justify-content: center;
  align-items: center;
}

对于工作的 jsFiddle，please see this link (注意我将背景设置为黑色以使内容可见)

更新 #2

要垂直居中，您可以进行以下调整:

CSS:

/* Add this rule */
#flex-wrap {
  display:flex;
  flex-direction:row;
  justify-content:center;
}

ul {
  
  padding:0;
  margin:0;
}

HTML:

<nav class="f6 fw6 ttu tracked">
    
  <!-- UPDATE add id flex-wrap -->
  <div id="flex-wrap">

    <ul id='flexstart' class="snip1226">
      <li><a href="#" data-hover="Home" className='pr5 pl5'>Home</a>

最新更新jsFiddle #2 这里