Tips for aligning a SPAN in a navbar to the center

When attempting to center the middle span, the right span containing buttons shifts downward. I am trying to create a navigation bar with one link on the left, three links in the center, and two buttons on the right. While floating the elements on the left and right is working fine, achieving proper center alignment is proving difficult. HTML

<div class="topnav">
    <span class="left">
        <a href="">Hostingg</a>
    </span>
    <span class="topnav-cen">
        <a href="#">Plans</a>
        <a href="#">Find Domain</a>
        <a href="#">Why Us?</a>
    </span>
    <span class="right">
        <button>Sign In</button>
        <button>Join Waitlist</button>
    </span>
</div>

CSS

[THE ISSUE IS THE BUTTONS SHIFTING DOWN WHEN CENTERING THE MIDDLE DIV][1]
.topnav{
    overflow: hidden;
    position: relative;
}

.topnav a{
    text-decoration: none;
    float: left;
}

.topnav-cen {
    display: table;
    margin: 0 auto;
}


.left{
    float: left;
}

.right{
    float: right;
}

Answer №1

Check out the code snippet provided below to resolve your issue:

.topnav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.topnav a {
  text-decoration: none;
}
<div class="topnav">
  <span class="left">
    <a href="">Hostingg</a>
  </span>
  <span class="topnav-cen">
    <a href="#">Plans</a>
    <a href="#">Find Domain</a>
    <a href="#">Why Us?</a>
  </span>
  <span class="right">
    <button>Sign In</button>
    <button>Join Waitlist</button>
  </span>
</div>

Answer №2

To achieve the desired effect of aligning three spans in one alignment with equal spacing and vertical center, you can utilize the flex property as shown below:

.topnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

Answer №3

.topnav {
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
}

.topnav a {
  text-decoration: none;
}

.topnav-cen {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
<div class="topnav">
  <span class="left">
    <a href="">Hosting Solutions</a>
  </span>
  <span class="topnav-cen">
    <a href="#">Plans</a>
    <a href="#">Check Domain Availability</a>
    <a href="#">Why Choose Us?</a>
  </span>
  <span class="right">
    <button>Log In</button>
    <button>Join the Waiting List</button>
  </span>
</div>

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

CSS exclusive - achieving a horizontal scrolling list with all list items in a single row

I am working with a div that has a fixed width. Inside this div, there is an unordered list (ul) containing a random number of list items (li) with varying widths. My project utilizes the Bootstrap framework. Below is an example of the code structure: & ...

Display information upon the clicking of a button and update the color of the selected button

When a button is pressed, I want to display content and change the color of the active button. Currently, I can do each operation individually, but I'm struggling to merge these functionalities. This is how my script looks like for displaying the con ...

Issue with PHP's ng-click not functioning properly with Angular JS's dynamic HTML generation

I'm just starting out with Angular JS. I'm trying to create an ng-click event in dynamically generated HTML from PHP, here's the code snippet. var app = angular.module('pageapp',[]); angular.module('pageapp') .filter(& ...

Creating line breaks for ToolTip titles in Material-UI can be achieved by using the appropriate syntax and

I am currently working with the ToolTip component and I have a query regarding displaying two lines for the title text - one line for each language rather than having them displayed on a single line. Is it possible to achieve this and how can I style the c ...

Retrieve the erased document using Google's cache feature

After accidentally overwriting my .php web document file with an old version, I attempted to access the cached copy on Google. The only thing I could find was the HTML scripts, as the PHP coding was not visible. Now I am seeking a method to recover the e ...

When attempting to organize the layout of the dash app using app.layout=dbc.Container(), an AttributeError occurs, indicating that the 'layout' attribute is not available in the 'tuple' object

I am facing an issue with the script I have: import dash import pandas as pd import numpy as np import database from dash import Dash, dcc, html import dash_bootstrap_components as dbc # create a dash app that is mobile-friendly app = dash.Dash(__name__, ...

Scrollbar Overlay

I am currently working on an HTML page where I have implemented a CSS style overlay lightbox effect using CSS and jQuery. If you want to take a look at the code, click here One issue I am facing is that when I resize the window height so the right-hand s ...

how do I modify my JavaScript code to achieve the desired outcome

How can I program a button to disable after being pressed 10 times in less than a minute, but continue counting if not pressed for 1 minute? function buttonClicked() { if (totalCount + accCounter > 9) { document.getElementById("btn").disabled = ...

What is the best way to receive detailed error messages from the LESS compiler when using it in Symfony 2?

I have successfully implemented dynamic compilation of LESS scripts to CSS in Symfony 2 by following this guide: However, I am facing an issue where if there is an error in a LESS script, the compilation fails and no CSS is generated for the browser. Is t ...

Basic Tallying Code in JavaScript

Hi, I am currently working on creating a basic counter using HTML / CSS and Javascript. Unfortunately, my Javascript code is not functioning correctly, even after trying various solutions found online. I attempted to include "async" but it appears that my ...

Incorrect Alignment of Centered Boxes with CSS

I'm having trouble creating centered boxes with CSS. Currently, I have the following code: http://jsfiddle.net/LW7mN/2/ .trex-clear-all{ display: inline-block; width: 99%; height: 17px; font-size: 12px !important; text-align: -w ...

Align text vertically next to an image

I am facing a challenge with aligning text vertically next to an image floated left. I have tried various solutions recommended on different platforms, but none seem to work for me. Despite following the suggestions provided in this particular solution, I ...

Is there a way to remove the initial number entered on a calculator's display in order to prevent the second number from being added onto the first one?

I am currently in the process of developing a calculator using HTML, CSS, and JavaScript. However, I have encountered an issue with my code. After a user inputs a number and then clicks on an operator, the operator remains highlighted until the user inputs ...

The jQuery toggleClass() function is not being applied successfully to content that is dynamically generated from

I've created an awesome collection of CSS-generated cards containing icons and text with a cool animation that expands upon tapping to reveal more icons and options. I carefully crafted the list to look and behave exactly how I wanted it to. But now, ...

A surprise awaits in IE with the unusual appearance of a div display

body { background: #9cdcf9 url(/images/left_cloud.png) bottom left no-repeat; font-family:\"Trebuchet MS\"; padding:0; margin:0; border:0; } #cloud-container { width: 100%; background: url(/images/right_cloud.png) bott ...

Is there a way to retrieve the fields of an index in elastic search?

After receiving a JSON object from an elastic search query, I successfully extracted the data using the code snippet below: $scope.results = response.hits.hits; console.log($scope.results); var resultstofilter = []; var resultArray = []; ...

Achieve the hidden div scroll effect in React by initially hiding the div and then allowing

I am currently working on a web chat application using next.js. One of the features is an emoji picker button that, when clicked, displays a menu of emojis. The issue I am facing is that in order for the user to see the emoji menu, they have to scroll down ...

The ng-repeat ng-switch combination is not functioning as expected

My data can be simplified to the following in my code: function DemoCtrl($scope) { $scope.myData= [ {text: "blah", other: 3, V: 'caseOne'}, {text: "blah", other: 3, V: 'caseTwo'}, {text: "blah", other: 3, V ...

What is the best way to utilize Rselenium's findElement() function in order to target an xpath based on its text content

Despite researching similar questions on stack overflow, I have not been able to make my code work. Here is the initial code I am working with: library(RSelenium) library(rvest) remote_driver <- RSelenium::remoteDriver( remoteServerAddr = "local ...

Navigate down the page until you reach the section that is set to display as a block

Is it possible to make the page automatically scroll to a specific element located in the middle of the page when changing its display property from none to block? ...