What is the best way to align the items in my navigation bar to the center?

I'm having trouble getting my navbar buttons to appear in the center of the navigation bar. No matter what I try, they only seem to align to the left or right. Can anyone help me figure out how to center them? Here's the CSS code I'm working with:

body{
 background-color:#d9dbdd;
}

#nav {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
 top: 0;
 width: 100%;
 z-index: 999999;
 position:fixed;
}

#nav li {
 float: left;
}

#nav li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

#nav li a:hover:not(.active) {
 background-color: #111;  
}

.active {
 background-color: #007ed8;
}

If anyone wants to take a look, here's my code on Jsfiddle: https://jsfiddle.net/ctjhvz6u/

htmlcssbootstrap-4

Answer №1

To center align the items in your navigation bar, replace the float: left rule with display: inline-block on your #nav li element. Additionally, add text-align: center to your #nav container.

Having a float rule on an element will prevent it from being centered. By using display: inline-block and setting text-align: center on the parent element, you can horizontally center-align the items.

body {
  background-color: #d9dbdd;
}

#nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  top: 0;
  width: 100%;
  z-index: 999999;
  position: fixed;
  text-align: center;
}

#nav li {
  display: inline-block;
}

#nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#nav li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #007ed8;
}
<ul id="nav" class="bg-inverse navbar-inverse">
  <li><a class="active" href="#despre">Despre mine</a></li>
  <li><a href="#educatie">Educatie</a></li>
  <li><a href="#aptitudini">Aptitudini</a></li>
  <li><a href="#experienta">Experienta</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

Fiddle: https://jsfiddle.net/ctjhvz6u/1/

Answer №2

Get rid of the following:

#nav li {
  float: left;
}

Instead, add this to #nav

display: flex;
align-items:center;
justify-content: center;

I recommend using

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Make sure to include these properties for maximum browser compatibility.

Answer №3

Utilize the power of Flexbox to achieve this:

#menu {
  display: flex; /* inline display of flex-items (sub-elements) */
  justify-content: center; /* horizontally centers them */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am experiencing issues with the functionality of my Boot Strap Dropdown Menus

I've been struggling with this issue for days. Is there something I'm overlooking? The drop down menu just won't work for me. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <scrip ...

bootstrap-4

What is the process for editing or importing CSS within a React project?

I'm a beginner in React and I am encountering an issue with CSS not loading properly. I followed the tutorial for importing it, but it seems like there might be a better way to do it now as the tutorial is outdated. Below is my code, I would appreciat ...

cssreactjs

the failure of the second function to execute

Struggling with a particular issue. Two functions have been created as shown below: function limit_char_normal(textid, limit, infodiv){ var text = $('#'+textid).val(); var textlength = text.length; if (textlength > limit) { ...

javascriptjqueryhtml

Conceal descendant of list item and reveal upon clicking

In my responsive side menu, there is a submenu structured like this: .navbar ul li ul I would like the child menus to be hidden and only shown when the parent menu is clicked. Although I attempted to achieve this with the following code, it was unsucces ...

javascriptjqueryhtmlcss

What is the proper way to justify text alignment in HTML?

I want to align the text to the right like the first row, but the second row keeps overflowing below the image. How can I ensure that the text is properly aligned regardless of the number of rows? <a href="javascript:;" id="A_3"><i id="I_4">&l ...

htmlcssalignment

Turning off the ability to horizontally scroll in an iframe using touch controls

I am trying to disable horizontal scrolling in an iframe on my website, particularly when a user uses touch input and drags horizontally. The scroll bars can still be visible and draggable when touched directly. Unfortunately, I do not have control over th ...

htmlcssiframescrollhorizontal-scrolling

Automatically generating new lines of grid-template-columns with CSS grid

I am new to using grid in CSS and there are still some concepts that I don't quite understand. Below is the container I am working with: <section class="css-grid"> <div class="css-item"><img src="1.jpg" / ...

htmlcsscss-grid

What is the best way to maintain the current tab selection when navigating through different pages?

I am currently faced with an issue involving pagination on two tabs. The problem arises when I navigate to the second tab and attempt to paginate the data, only to find myself redirected back to the first tab. If anyone could provide assistance, it would ...

phppaginationbootstrap-4bootstrap-tabs

Discovering the exact measurement of "remaining space" in absolute units with flexbox techniques

I am faced with a dilemma that is leaving me uncertain. Within a flexbox layout, specifically column-oriented, there are three children: top, middle, and bottom. The challenge arises in the middle child where I must embed a third-party component that requ ...

htmlcssflexbox

Ways to have the "li" element displayed on a separate line

let selector = document.querySelector('.activate') selector.addEventListener('mouseover', function(){ document.querySelector('#hidden-li').classList.remove("hidden") }) selector.addEventListener('mouseleave', f ...

htmlcss

Capture an image from the webcam without any manual intervention and store it in the system's directories

Looking to automate the process of capturing a picture from a webcam once access is granted, and then saving it without any user intervention. I've managed to capture the image but struggling with: A) Automating the capture process B) Saving the ca ...

javascripthtmlimagevideo-capturecapture

Differences between Array `forEach` and `map()`

I am having trouble displaying the options list even though I am passing an array. Any assistance would be greatly appreciated. Thank you. const options_A = [ { label: "AA", value: "AA" }, { label: "BB", valu ...

javascriptreactjsarraysbootstrap-4bootstrap-5

Utilizing Bootstrap Table of Contents plugin: accessing the "$scope" object to incorporate additional headings

I'm having trouble implementing the Table of Contents plugin found here: I am struggling to figure out how to correctly call the $scope object in order to include h1 to h6 headings in the TOC. Currently, only h1 to h3 are showing up. Below is a snip ...

jquerybootstrap-4

Looking to screen usernames that allow for the use of the DOT (.), underscore (_), and Dash (-)?

I am using jQuery to filter usernames that are exactly 3 characters long. The validation criteria includes only allowing the following special characters: ., _, and - var filter = /^[a-zA-Z0-9]+$/; Therefore: if (filter.test(currentval)) { //valid ...

javascriptjqueryhtml

The justify-content property aligns single-line text horizontally, but its alignment may not be consistent when the text expands over

Seeking a deeper understanding of flexbox alignment, I decided to experiment with aligning content using only flexbox properties. One puzzling observation is how "justify-content" centers items with single lines of text (flex-item-1 and flex-item-5), but n ...

htmlcssflexbox

Using Node.js to Send Emails via API

I've been grappling with an issue for over a week while trying to develop a web application that sends welcome emails to new subscribers. Despite my API code working perfectly, I cannot seem to get any output on the console indicating success or failu ...

javascripthtmlcssnode.jspostmark

Material UI button component does not have the applied class

I'm encountering an issue with applying a CSS class (redirectButton) to a Material UI button. Despite my efforts, the class is not being successfully applied. Below is the HTML code in question: {(isDataAdapterAdmin && !dataSources?.length) & ...

htmlcssreactjsmaterial-ui

Utilizing a combination of CSS and JavaScript, the traffic light can be altered to change based on

**I stumbled upon this online code snippet where a timer is controlled in CSS. I'm trying to figure out how to control it with JavaScript, but all my attempts have failed so far. Is there anyone who can help me solve this issue? What I'm attempti ...

javascripthtmlcss

Easily showcase a limitless number of items within a 10-column grid using Bootstrap!

This is the code snippet: <div *ngFor="let minute of state.minutes.specificMinutes.selectedMinutes | keyvalue" class="col-sm-1 checkbox-container"> <div class="custom-control custom-checkbox"> <input type="checkbox" (click)="state.m ...

htmlcssangularbootstrap-4

What is the best way to distribute stroke width evenly on a rounded hexagon in an SVG?

I created a rounded hexagon with stroke width, but the top and bottom curves appear darker. Does anyone know how to evenly distribute the stroke width along the border? Here is my SVG code: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox ...

htmlcsssvg