How do I center a UL/LI in the same row as left-aligned text?-CodePudding

I've been trying to write a menubar that has two groupings in the same row across the top of a webpage: on the left is the site name and in the center should be the menu options (a ul/li). So far, following similar issues, I've written the following, which appears on first glance to do exactly what I'm seeking.

HTML:

<div >
  <a href="#" >SITE NAME</a>
  <ul >
    <li><a href="#">MENU 0</a></li>
    <li><a href="#">MENU 1</a></li>
    <li><a href="#">MENU 2</a></li>
    <li><a href="#">MENU 3</a></li>
  </ul>
</div>

CSS:

.menubar {
  width: 100%;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
  position: fixed;
  top: 0;
  display: flex;
  flex-flow: row nowrap;
}

.logo {
  width: 33.33%;
  float: left;
  margin-left: 20px;
  font-size: 24px;
}

.ul {
  font-size: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ul li {
  margin-left: 15px;
  margin-right: 15px;
  display: inline-block;
}

However, if you look carefully in the JSFiddle (more apparent when widening browser windows or shrinking the window down just before the items begin wrapping), the 'centered' ul/li is not actually centered—it's closer to the left side of the browser window than the right. How do I fix this so that the ul/li remains truly centered in the menubar (as if the site name doesn't exist) with the left-aligned site name, regardless of what the browser window's width is? (I'm assuming within non-wrapping reason, since I plan to adjust sizes and behavior for smaller devices.)

JSFiddle

CodePudding user response：

You're using a lot of margins, width and stuff. Check out flex here and you can get the same thing, properly aligned using flex and directions.

<!-- NEW CODE -->
<nav>
    <div >
      <span>Your Company</span>
  </div>
  <ul >
    <li > Menu 1 </li>
    <li > Menu 2 </li>
    <li > Menu 3 </li>
    <li > Menu 4 </li>
  </ul>
</nav>

<!-- OLD CODE -->
<nav>
  <div >
    <img src="https://placehold.it/200x200" alt="logo">
  </div>
  <div >
    <div > Menu 0 </div>
    <div > Menu 1 </div>
    <div > Menu 2 </div>
    <div > Menu 3 </div>
  </div>
</nav>

and the css

// MORE PROPERTIES

nav {
    align-items: center;
}

nav div.logo {
    position: absolute;
}

// OLD-NEW CSS
nav {
    display: flex;
    border: 1px solid pink;
}

nav div.logo {
  border: 1px solid green;
  display: flex;
  align-items: center;
}

nav div.logo span {
  padding: 0 0.5rem;
}

ul.nav-items {
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

ul.nav-items li {
  margin: 0 0.25rem;
  padding: 0.5rem;
  border: 1px solid blue;
}

// OLD CSS
nav {
  display: flex;
}

nav div.menu-items {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
}

nav div.menu-items div.menu-item {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

Fiddle:

NEW: https://jsfiddle.net/vzgn0Lju/1/

OLD: https://jsfiddle.net/kp9nsmah/1/

I added some margins between menu options and you can tweak a little bit more but flex is way easier than using lists and lots of things. You could use spans instead of div.menu items, can remove the container for items and such. But the general idea is there.