html - Flex-end and start not aligning vertically

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

I am trying to center the list items horizontally centered, but no matter what I do with CSS it remains like that. I know it has something to do with flex-end and flex-start, but I cannot figure out how to center it. I have tried both the align and justify properties but it doesn't seem to do anything.

I would also like to add that I want the elements to be all in one row that is centered within the navigation bar. I have to leave room inbetween them because the logo goes in the middle.

标签： htmlreactjscssflexbox

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，请参阅此链接（注意我将背景设置为黑色以使内容可见）

更新#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 这里