Trouble with center alignment of div in CSS

I attempted to create a centered horizontal menu on my webpage but the 'div align=center' attribute is not functioning correctly.

.nav ul {
  display: block;
  list-style-type: none;
  margin: 0;
  position: absolute;
}
.nav li {
  display: inline-block;
  float: left;
}
.nav li a {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica
Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } .nav li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } .nav div ul {display:block;} .nav li ul { display: none; } .nav
li ul li {
    display: block;
    float: none;
  }
  .nav li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
  }
  .nav ul > li:hover ul {
    display: block;
    visibility: visible;
  }
  .nav ul li:hover > ul {
    display: block;
  }
<div class="nav">
  <ul>

    <li><a href="#">Home</a>
    </li>
    <li>
      <a href="#">About </a>
      <ul>
        <li><a href="#">A1</a>
        </li>
        <li><a href="#">A2</a>
        </li>
      </ul>
    </li>

  </ul>
</div>

view sample code I have tried to make horizontal menu in center of page but 'div align=center' not working properly.

htmlcss

Answer №1

Get rid of position:absolute; in your ul and implement the following modifications

.nav{
    width: 100%;
}
.nav ul {   
    display:block;
    list-style-type:none;
    margin: 0px auto;
    width: 50%;
}

Check out the updated fiddle

Answer №2

Eliminate the use of position:absolute; as it does not interact with margin or padding values.

.nav ul {
list-style-type:none;
margin:0 auto;
display:table;
}

Check out the resolved fiddle here

Answer №3

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #19c589;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">About</a>
    <div class="dropdown-content">
      <a href="#">A1</a>
      <a href="#">A2</a>
      <a href="#">A3</a>
    </div>
  </li>
  <li><a href="#news">New</a></li>
</ul>

Answer №4

Here is how you can utilize it:

.navigation {
    padding:0 auto;
}

Answer №5

Kindly eliminate the ul position: absolute; property while keeping the rest of the styling intact. Below are the additional modifications required.

.nav {
    display: -webkit-box;
}
.nav ul {
    margin: 0 auto;
}

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

`Place the image in the middle of the page`

I'm attempting to align the image directly before the text within the same div. I've applied CSS with text-align:center to the div, but it only seems to affect the text. Any suggestions on how to position the image right before the text? http:// ...

htmlcss

Anticipating that the input in the search bar will be displayed on the search results page

Main Code in views.py from weatherbot.models import Question from django.template import RequestContext from django.shortcuts import render_to_response def search(request): query = request.GET.get('q') if query: ...

pythonhtmldjango

Switching from a top to bottom position can be quite the challenge for many

If there's a more efficient method for accomplishing what I'm about to inquire about, please inform me. So far, this is the best solution I could devise. I am looking to have a series of divs that enclose a sliding div within them. The sliding d ...

css

A custom class that uses toggleClass() does not trigger an alert upon a click event

I am encountering an issue with the toggleClass() function in jQuery that I haven't seen addressed before. Despite successfully toggling the class of one button when clicked, I am unable to trigger a click event on the newly toggled class. Here is th ...

javascriptjqueryhtmlcss

What is the best way to add HTML formatted text into Outlook?

In my Emacs, I've generated this syntax-highlighted code snippet and now want to paste it into an Outlook email with rendered HTML (without the actual HTML code). <pre> <span style="color: #a020f0; background-color: gtk_selection_bg_color;"& ...

htmlwindowsemailoutlook

What is the process for calculating and determining the exact area the div should be released?

I am currently developing a drag-and-drop application using only Javascript. I have successfully implemented the dragging functionality, allowing elements to be moved randomly within the page. However, I now face the challenge of creating a drop zone with ...

javascripthtmlcssdrag-and-drop

What is the best way to align the logo image to the left side of the Material UI app bar without any gaps?

Currently, I am working on a material UI app bar to serve as my navigation bar. The issue I am encountering involves the logo image on the left side of the page having excessive spacing from the edge, as shown in the image below. I've tried adjusting ...

cssreactjsmaterial-ui

View the edited image preview instantly upon selecting the image

I have selected an image and previewed it before submitting the form. However, now I wish to be able to edit the file immediately after selecting it, preview the changes, and then submit the file. <input type ="file" accept="image/*" id="image" name="i ...

javascriptjqueryhtmlajaxlaravel

How do I make a div's height equal to 100% of the height of its parent

I am trying to make a button stick to the bottom of a card no matter how much content is on it. I used the Bootstrap class mt-auto, which worked well. However, when I set the height of all divs to 100%, the row in the card body overflows from the lg breakp ...

htmlcssstylesheightbootstrap-5

Tips for resolving the issue of the symbol ' displaying as &#39 in an Angular 2 application

I am currently working on an Angular application that makes API calls when a name displayed in a grid table is clicked. However, I have encountered an issue where names containing an apostrophe are being displayed incorrectly as &#39 instead. I managed ...

javascripthtmlangularkendo-gridjql

Creating a JSFiddle with sprites using source and image files from Github with THREE.JS - a step-by-step guide

Greetings! I am currently working on creating a JSFiddle based on the official THREE.js HUD Sprites example. However, I am facing an issue where the sprite images do not seem to load or apply using the URLs specified in the original file:- //... URL' ...

javascripthtmlimagethree.js

Guidelines on retrieving an HTML element from a source document

To change a specific HTML section identified by a tag id in source code consisting of both HTML and PHP, I need to use PHP. If the code is purely HTML, a DOM parser can be utilized; otherwise, if there are multiple nested DIVs, regex with preg_match might ...

phphtmlextract

I am attempting to secure a webpage with a password using JavaScript

I've been working on adding password protection to my webpage at , with the goal of allowing users to enter the password once per session. However, I've encountered an issue: if a user cancels out of the initial prompt or enters the wrong passwor ...

javascripthtmlpassword-protection

The function I created is having trouble connecting to the controller.js file

My JavaScript controller file function ServicesCtrl($scope) { console.log("Greetings from ServicesCtrl"); $scope.message = "Hello!"; } The main HTML file <html> <head> <title>The Complete Web Development Stack</ti ...

htmlangularjsangularjs-controller

implementing a vertical separator in the main navigation bar

Is there a way to insert a vertical divider after each li element on the main menu? <ul class="nav navbar-nav"> <li><a href="#"><i class="fa fa-home"></i> <span class="sr-only">(current)</span></a>< ...

htmlcss

Troubleshooting the issue with reactdom.render() functionality in CodeSandbox

Having issues with ReactDom in CodeSandbox for React. The HTML file includes: <body> <div id="root"></div> </body> <script src="scr/index.js"> The JavaScript file (named index) includes: ReactDOM.rende ...

javascripthtmlreactjs

Tips for creating seamless image transitions using a toggle button

My transition effect is working smoothly, but I am having trouble setting it up for the image. How can I resolve this issue? I attempted the following: var lightsOff = document.querySelector("#lights-off"); var lightsOn = document.querySelector("#lights-o ...

javascripthtmlcsscss-transitions

Guide to binding input type= 'email' in Knockout.js

My project utilizes KnockoutJS with MVC. I am seeking assistance on determining whether an emailId is valid or invalid. Based on this validation, I need to dynamically enable/disable a button and set an error title for the corresponding textbox. Below is ...

javascriptjqueryhtmlknockout.jsknockout-mvc

Jquery is failing to handle multiple inputs

I am currently working on a system that can handle multiple Yes/No questions. However, every time I try to submit the form, I encounter an error in the console that I cannot identify, and no data is returned from the query. Previously, I used an Array to s ...

javascriptjqueryhtmlajax

Avoid wrapping elements

Is there a foolproof method or best practice to prevent an HTMLElement from wrapping? Specifically, I'm referring to elements with relative positioning. One possible solution could be using absolute elements and adjusting their left position based on ...

javascriptjqueryhtmlcssdom