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

Question

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 class="menubar">
  <a href="#" class="logo">SITE NAME</a>
  <ul class="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

Morilon · Accepted Answer · 2023-01-23T13:37:10.503

1

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 class="logo">
      <span>Your Company</span>
  </div>
  <ul class="nav-items">
    <li class="nav-item"> Menu 1 </li>
    <li class="nav-item"> Menu 2 </li>
    <li class="nav-item"> Menu 3 </li>
    <li class="nav-item"> Menu 4 </li>
  </ul>
</nav>

<!-- OLD CODE -->
<nav>
  <div class="logo">
    <img src="https://placehold.it/200x200" alt="logo">
  </div>
  <div class="menu-items">
    <div class="menu-item"> Menu 0 </div>
    <div class="menu-item"> Menu 1 </div>
    <div class="menu-item"> Menu 2 </div>
    <div class="menu-item"> 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.

edited Jan 23 '23 at 13:37

answered Jan 23 '23 at 02:17

Morilon

416
1
4
10

Aren't lists considered semantically better than divs, in this case (for accessibility)? Edit (I didn't mean to post just that): I might've also been a little misleading with the "logo" CSS class. I intend to use simplex text in the logo's place, and if I do that with your example (essentially replacing the image with text) it still pushing the center menu div to the right, which is similar to the issue I'm originally having (that it isn't and doesn't remain centered). – sebastianross Jan 23 '23 at 03:14
You're absolutely right. Semantic is very important while working with css/html so I did using list instead. The logic is the same, use flex to organize, order and align items and content between elements. I also added a few borders so you can see actually what is going on on each element, you can also tweak and change values to see how they behave. :} – Morilon Jan 23 '23 at 10:43
Thank you for helping me reduce the excess css code, however, I notice even in the new example, the nav-items section is still centered not based on the width of the screen but based on the right side of the logo div and the right side of the screen. Is it possible to truly center the menu section (i.e., ignoring the logo div, so they are centered on the browser's window rather than the space to the right of the logo div)? – sebastianross Jan 23 '23 at 13:18
1

Oh oh oh, I'm sorry. I understand what you meant now. Right, so, we can change the position of the logo to `absolute` and add an alignment property to the container nav. I'll update the code with a 3rd version with the additional properties, ok? Keep the version 2 and add the properties on "more properties" and that's it. Check to see if suits you. – Morilon Jan 23 '23 at 13:35
Thanks, that's perfect! And with less CSS styling than what I was trying to whip up. – sebastianross Jan 23 '23 at 13:53
:dance: CSS is freaking crazy. Flex is a thing I finally understand, haha. But I still suck. Keep learning, keep studying. We'll get there. :D – Morilon Jan 23 '23 at 14:55

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

1 Answers1