Horizontal alignment of navigation bar items using <ul>

I'm trying to center the bar within the navigation bar vertically, but when I use align-items: center for the bar, it only centers the sign-in button, leaving it slightly above the middle position.

nav a{
color:white;
}
nav{
    justify-content: space-between;
    align-items: center;
    background-color: brown;

}
nav ul{
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    background-color: black;

}
nav ul li a{
    padding: 1rem 0;
    margin: 0 0.5rem;
    position: relative;
    font-size: 14px;
    font-weight: bold;
}
.container{
  background-color: green;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container" >
            <nav class="d-flex flex-row">
                <h1 class="sling"><a href="index.html">Sling</a></h1>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Testimonial</a></li>
                    <li><a href="#">Download</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
                <button type="button" class="signin">Sign in</button>
            </nav>
        </div>

Does anyone know how to center it properly?

htmlcssbootstrap-4

Answer №1

Implement the mb-0 class on the UL element to remove the bottom margin.

    <nav class="d-flex flex-row align-items-center">
        <h1 class="sling"><a href="index.html">Sling</a></h1>
        <ul class="mb-0">
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Testimonial</a></li>
            <li><a href="#">Download</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
        <button type="button" class="signin">Sign in</button>
    </nav>

Answer №2

To remove the extra space at the bottom of the nav ul, you must reset the margin to zero. This space is typically added by the default styles of the browser.

nav a {
  color: white;
}

nav {
  justify-content: space-between;
  align-items: center;
  background-color: brown;
}

nav ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0; /* <-- + Added */
  display: flex;
  align-items: center;
  background-color: black;
}

nav ul li a {
  padding: 1rem 0;
  margin: 0 0.5rem;
  position: relative;
  font-size: 14px;
  font-weight: bold;
}

.container {
  background-color: green;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
  <nav class="d-flex flex-row">
    <h1 class="sling"><a href="index.html">Sling</a></h1>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Testimonial</a></li>
      <li><a href="#">Download</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact us</a></li>
    </ul>
    <button type="button" class="signin">Sign in</button>
  </nav>
</div>

Answer №3

Many are suggesting to remove the margin bottom. Have you considered using align-items: baseline; instead of center:

nav {
    justify-content: space-between;
    align-items: baseline;
    background-color: brown;
}

Check out the code here

https://i.sstatic.net/9R8Fo.png

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

"Utilize a 3-column layout with the center column aligned to the

I am working on an interesting task. <div class="slider"> <div class="1s">1st slide</div> <div class="2s">2nd slide</div> <div class="3s">3d slide</div> </div> Here is the CSS code: .slider div { ...

csshtmlslider

make the chosen text appear on Internet Explorer

1 How to insert text into a text box using code? 2 Moving the caret to the end of the text. 3 Ensuring the caret is visible by scrolling the text box content. 4 Programmatically selecting specific text in a textbox. 5 **How to make selected text visible?** ...

javascriptjqueryhtmlinternet-explorer-11

Transforming a div into a clickable hyperlink

I have a JavaScript function that generates a div with a link inside it. Here is how the div and link are created: $('#info').find('#link').text("View"); //Creates a new link var eventLink1 = document.createElement('a& ...

javascriptjqueryhtml

What is the best way to insert additional HTML elements beneath a video background that extends into the navigation bar?

*{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body{ font-family: montserrat; } nav{ height: 85px; width: 100%; z-index:1001; } lab ...

htmlcss

Create collapsible horizontal submenus in Bootstrap for mobile devices

I created a modal specifically for mobile users that displays when they access the site. It features various categories and nested menus for easy navigation. <!-- Modal --> <div class="modal fade" id="exampleModalCenter" t ...

htmltwitter-bootstrapbootstrap-5

Error: Attempting to assign a value to the property 'running' of an undefined variable

While working with Nuxt.js, I encountered an issue related to reading the running property of my client object. Here is the HTML code snippet: <b-button v-show="!(projectSelecter(project.ID)).isStarted" //this work just fine variant="success" c ...

javascripthtmltwitter-bootstrapvue.jsnuxt.js

Is there anyone who can provide a straightforward solution (code) for < something basic?

I have learned a lot about programming, but I'm stuck on one thing. How can I make an image stay in place when clicked on? What I mean is that when you click and hold on the image, then move the cursor, the image moves with the cursor. What I want is ...

phphtmlcss

The Regex.Replace function is not functioning as expected

I am currently faced with the challenge of replacing HTML tags within a string. For example, I need to convert <strong>text</strong> to <b>text</b>, among other similar replacements (although I understand that the b tag is considere ...

c#htmlregexstring

Locate specific phrases within the text and conceal the corresponding lines

I have a JavaScript function that loops through each line. I want it to search for specific text on each line and hide the entire line if it contains that text. For example: <input id="search" type="button" value="Run" /> <textarea id ...

javascriptjquerycss

Linking various nodes together using the capabilities of the Web Audio API

I am experimenting with audio and trying to achieve a few specific goals: Adjust the overall volume of the audio. Modify the volume and delay of a particular channel (left). This is the code I have been working on: var audioContext = window.AudioContex ...

javascripthtmlweb-audio-api

Retrieving text snippet from an HTML document using .NET

Users input HTML content using a richtext editor, allowing for a variety of elements. Here is an example of such content: <h1>Header 1</h1> <p>Some text here</p><p>Some more text here</p> <div align=right><a hr ...

asp.nethtmlregexstringhtml-content-extraction

Retrieve information from the selected row within a table by pressing the Enter key

I have a search box that dynamically populates a table. I am using arrow keys to navigate through the rows in the table. When I press the enter key, I want to retrieve the data from the selected row. For example, in the code snippet below, I am trying to ...

javascripthtmljquerycss

The function send_filer either returns None or finishes execution without encountering a return statement

I am currently developing an application where users can download a plot.png and a file.csv, but the send_files function isn't working as expected. Below is my Python code: app = Flask(__name__) app.USE_X_SENDFILE = True @app.route('/', met ...

pythonhtmlflaskserversendfile

I'm curious about the meaning behind this code snippet: `$Odd = ($Odd == "even") ? "odd" : "even";`. Any ideas?

<?php $Odd = "even"; $query = $MySQLi->query("SELECT id, look, username, motto FROM users WHERE rank = '7'"); if($query->num_rows > 0): while($UserRow = $query->fetch_assoc()) { $Odd = ($Odd == "even") ? "odd" : "even"; ?&g ...

phphtmlcssstringcontent-management-system

Element widths are displaying uneven alignment

I can't seem to wrap my head around what's happening here. I've got an HTML layout with a header, sidebar, and central content page. Both the sidebar and central content are within the same div acting as a clearfix. I floated the sidebar le ...

htmlcsscss-floatwidthclearfix

Is it possible to invoke Bootstrap modal functions without using jQuery?

I'm in the process of removing jQuery dependencies from my app, but I still rely on Bootstrap. Is there a way to trigger modal functions like $('#myModal').modal('show') without using jQuery now? ...

javascriptjquerybootstrap-4

Tips for accessing a URL with a specific value in the HTML file

This form submits a URL in this format: <form action="search.php?search=" method="GET" id="search-form"> <input id="search-text" name="search" type="text" maxlength="30" placeholder="type keyword"/> <button type="submit" name ...

phphtmlformswebforms

Tips for creating a background image that seamlessly adjusts to various computer screen sizes

I am trying to make sure that an image fills the entire browser window, but unfortunately it has fixed width and height dimensions. Is there a way to adjust this so it displays correctly on screens of different sizes? Can CSS be used to stretch the backg ...

htmlcss

Dynamic React animation with sliding elements

When jumping between the second and third "page" of content, I am unable to determine the reason why it is happening. The content is displayed as an absolute position. Check out the sandbox here: https://codesandbox.io/s/nostalgic-bhabha-d1dloy?file=/src ...

cssreactjscss-animationsreact-transition-group

CSS - setting the background-image property is not displaying the image

.main_banner { background-image: url("../images/main_banner.png"); width: 100%; height: auto; } <!DOCTYPE html> <html> <heading> <title> ********** </title> <link rel="sty ...

htmlcssbackground-image