Html Question posted in
Some basic documentation can be found here.

Html – How I can horizontally center all the elements in navigation bars?

I’m trying to horizontally center all the navigation links in my header section. I want the navigation links under the nav class to appear in the center of the header. Below is my HTML snippet for the header section:

<header class="header">
    <div class="container d-flex justify-content-between align-items-center">
        <div class="logo">
            <img src="{{ asset('images/logoheader.png') }}" alt="DishDash Logo" class="logo-img" />
        </div>
        <!-- <h1 class="text-white">DishDash Dashboard</h1> -->
        <div class="d-flex align-items-center">
            <nav>
<ul class="nav">
    <li class="nav-item"><a class="nav-link text-white" href="{{ url('/features') }}">Features</a></li>
    <li class="nav-item"><a class="nav-link text-white" href="{{ url('/about') }}">About</a></li>
    <li class="nav-item"><a class="nav-link text-white" href="{{ url('/contact') }}">Contact</a></li>
</ul>

            <div class="ms-3">
                <a href="{{ route('login') }}" class="btn btn-light btn-sm me-2">Login</a>
                <a href="{{ route('register') }}" class="btn btn-primary btn-sm">Register</a>
            </div>
        </div>
    </div>
</header>

I have tried using CSS with properties like text-align: center, justify-content: center, and display: flex, but the navigation links still appear on the right side of the header. For example:

body, html {
    margin: 0;
    padding: 0;
    font-family: Montserrat, sans-serif;
    height: 100%; /* Ensures full height of the page */
}

/* Background and General Layout */
body {
    background-color: #ffffff;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures footer is pushed to the bottom */
    align-items: center;
    padding: 20px;
    height: 100%;
}

/* Header Styling */
.header {
    background-color: rgb(146, 180, 210);
    padding: 1rem 0;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
    /* display: flex;
    justify-content: center; */
}

.nav li{
    font-weight: bold;
}

Despite my attempts, the navigation links remain aligned to the right due to the Bootstrap class justify-content-between applied to the container.

What I want to achieve:

  • The logo should stay on top or on the left (depending on the layout) of the header.
  • All three navigation links (Features, About, Contact) should be horizontally centered in the middle of the header.
Tags:

2

Answers


  1. 0

    Block:

    .page_nav {
  display: block;
  width: 100%;
  background-color: palegreen; 
}
.page_nav_item {
  display: block; 
}
.page_nav_item:not(a) {
  margin: 0;
  width: 100%;
  text-align: center;
}
    <div class="page_nav">
  <a href="features.html" class="page_nav_item">Features</a>
  <a href="about.html" class="page_nav_item">About</a>
  <a href="contact.html" class="page_nav_item">Contact</a>
  <button class="page_nav_item">Register</button>
  <button class="page_nav_item">Login</button>
</div>

    Inline:

    .page_nav {
  display: block;
  width: 100%;
  background-color: palegreen; 
}
.page_nav_item {
  display: inline; 
}
.page_nav_item:not(a) {
  margin: 0;
  width: calc(100% / 5); /* 5 Items */
  text-align: center;
}
    <div class="page_nav">
  <a href="features.html" class="page_nav_item">Features</a>
  <a href="about.html" class="page_nav_item">About</a>
  <a href="contact.html" class="page_nav_item">Contact</a>
  <button class="page_nav_item">Register</button>
  <button class="page_nav_item">Login</button>
</div>

    It make every item in nav make center.

    Login or Signup to reply.
  2. 0

    In your code, the login and registration divs are moved below the navigation div, so all three divs are set to horizontal and the navigation section is set to centre, which meets your needs.

    body,
html {
    margin: 0;
    padding: 0;
    font-family: Montserrat, sans-serif;
    height: 100%;
}

body {
    background-color: #ffffff;
    color: #333;
    height: 100%;
}

.header {
    background-color: rgb(146, 180, 210);
    padding: 1rem 0;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);
}

.nav li {
    font-weight: bold;
}
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<header class="header">
    <div class="container d-flex justify-content-between align-items-center">
        <div class="logo">
            <img src="{{ asset('images/logoheader.png') }}" alt="Logo" class="logo-img" />
        </div>
        <div class="d-flex align-items-center">
            <nav>
                <ul class="nav">
                    <li class="nav-item"><a class="nav-link text-white" href="{{ url('/features') }}">Features</a></li>
                    <li class="nav-item"><a class="nav-link text-white" href="{{ url('/about') }}">About</a></li>
                    <li class="nav-item"><a class="nav-link text-white" href="{{ url('/contact') }}">Contact</a></li>
                </ul>
            </nav>
        </div>
        <div class="ms-3">
            <a href="{{ route('login') }}" class="btn btn-light btn-sm me-2">Login</a>
            <a href="{{ route('register') }}" class="btn btn-primary btn-sm">Register</a>
        </div>
    </div>
</header>

    In the above code, you can see the logo is set to the top left, the navigation section is set in middle and the customer links are set to the top right.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search