The nightmare of centering with margin:auto

I've exhausted all my options trying to center the navigation menu, but I just can't seem to get it right. I've experimented with text-align, margin-auto, block display... on both the parent and child elements. It's frustratingly simple, yet I can't crack it and it's starting to take a toll on my hair.

Check out the demo here.

If you want to take a look at the code, here's the HTML:

<div id="navigation" class="col-full">

<ul id="main-nav" class="nav fl">

  <li id="menu-item-266" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-266"><a href="http://previews.tinygiantstudios.co.uk/">Home</a></li>
  <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://previews.tinygiantstudios.co.uk/about-us/">About Us</a></li>
  <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://previews.tinygiantstudios.co.uk/news/">News</a></li>
  <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://previews.tinygiantstudios.co.uk/contact/">Contact</a></li>

</ul>   
</div><!-- /#navigation -->

And the CSS

#navigation {
  margin-bottom: 0px;
  background-color: #131313;
  border-top: 0px solid #DBDBDB;
  border-bottom: 0px solid #DBDBDB;
  border-left: 0px solid #DBDBDB;
  border-right: 0px solid #DBDBDB;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  font: 14px/14px sans-serif;
  padding: 10px 0;
}

.nav {
  z-index: 99;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
  margin-left: 10px;
}

.fl {
  float: left;
}

.nav li {
  float: left;
  width: auto;
}

Can someone lend a hand and point out what I'm overlooking?

Thank you,

htmlcssxhtmlcentermargin

Answer №1

To implement this functionality in your CSS, insert the following code:

.navigation {
  text-align: center;
  width: 100%;
}

.navigation item {
  float: none;
  display: inline-block;

  /* This is a workaround for IE7 */
  zoom: 1;
  *display: inline;
}

Keep in mind that this may not be compatible with older versions of Internet Explorer, but that's no surprise!

Answer №2

In order to center content horizontally on a webpage, you must set the margin property to auto and make sure the element is being displayed as a block-level element.

Answer №3

To ensure that setting the margin to zero or automatic is effective, make sure to remove any inline float on block elements with fixed width.

Answer №4

To center using the margin: 0 auto; technique, your element needs to have a display: block; property, a specified width, and should not be floated using float.

Therefore, in order to achieve this, you should remove the fl class from your <ul> and assign it a fixed width.

Answer №5

To ensure proper alignment, it is essential to define a width for either #navigation or #main-nav.

Currently, the #navigation element occupies the full width of #wrapper, preventing it from being centered. Setting its width to around 500px will resolve this issue.

If the goal is to center main-nav instead of navigation, the float:left; property should be removed and a fixed width along with margin: auto; should be applied.

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

How can you insert text onto a page with restricted space?

As I work on my web page, I find myself restricted by a character limit of 10,000. This limitation is proving to be quite challenging for me. The tabs on the page I am editing are divided with div ID, and all my writing already takes up 80% of the charact ...

htmlcssembed

Utilizing jQuery for cloning elements

I need to add functionality for adding and deleting rows in multiple tables on my website. Currently, I am doing this by directly inserting HTML code using jQuery, but it has become inefficient due to the number of tables I have. I am considering creating ...

javascriptjqueryhtmlajax

What strategies can I implement to prevent position: absolute from obscuring my content?

I am currently experiencing an issue with my Google Map loading within a tab. The container div has the position set to absolute. Although the map displays correctly, I am encountering a problem where it covers any content I try to place underneath it. My ...

javascriptjqueryhtmlcss

Styling used on the ofx.com website

I am attempting to recreate the CSS effects used on ofx.com, which includes a picture of London and a grey box with text. However, my version is not working properly. I am unsure of what might be missing in my code. Here is the snippet: .generic-hero-bl ...

css

Adjust the height of a div element in the browser based on the content it contains

While I've come across similar questions, I have a query of my own... Is there a way to make the green div fill 100% of the browser window regardless of its content? http://jsbin.com/aculed/1/edit HTML: <div id="container"> & ...

htmlcss

After sending a test email, inline CSS in Gmail seems to be functioning to some extent

While working on applying inline CSS styling to HTML for email, I have encountered an issue where the styling partially works when sending a test email. Can anyone provide guidance on how to resolve this problem? Steps to reproduce: Step 1 - apply CSS st ...

htmlcsshtml-emailinline-styles

Utilizing .NET MVC for incorporating HTML attributes with @HTMLTextAreaFor

I'm encountering an issue when trying to add HTML attributes to a text area using the @HTML command. Specifically, I am attempting to include a class name, but it doesn't seem to be working as expected. Below is the code snippet that I am workin ...

c#html.netasp.net-mvcmodel-view-controller

Anchor tag remains in fixed location in HTML

Here's a link that I need help with: <a id="readmore" href="#">READ MORE</a> Currently, when the user clicks on this hyperlink, I am using Jquery to toggle the content below it to show/hide the content. However, I have encountered an ...

jqueryhtml

What is causing the initial activation of the <button> within a form?

Within my <form>, I have included 2 submit buttons. The first button looks like this: <button class="regular" id="geocodesubmit" style="height:40px;">Set Location</button> The second button looks like this: <button type="submit" ...

javascripthtmlcssforms

The printing feature in javascript does not include the ability to print values from textboxes

I'm encountering an issue when trying to print an HTML table with textboxes that should get their values from another function. However, the preview is not showing anything. Below is the complete code: <html> <head></head> < ...

javascripthtmlfunction

jQuery live DataAttribute manipulation

Here is the code snippet I am working with: <head runat="server"> <title>Sidebar</title> <link href="css/style.css" rel="stylesheet" /> <script src="scripts/jquery-1.11.1.min.js"></script> <script src ...

jqueryhtml

Can you answer this straightforward query about CSS positioning?

I am currently facing a challenge in creating a small div (header class) that overlays a main banner image div (banner class). When I maximize my browser window, the positioning is correct. However, upon resizing the browser, the header div maintains its m ...

htmlcss

Ways to identify an element within a webpage

I'm currently working on creating a chrome extension that can detect the presence of specific elements on a webpage. The goal is to have this extension automatically run every time a new page is opened and display a popup message if the element is fou ...

javascripthtml

Is there a way to locate ComputedStyle elements using Nokogiri?

I am currently using Ruby along with Nokogiri to parse through HTML documents. I am looking to select all nodes that match a CSS class with the style attribute display: none, but the CSS class is unknown in advance. For example: <html> <body&g ...

cssrubynokogiri

Enhance your website with a multi-column Pure CSS drop-down menu

Can anyone help me with this issue I'm facing? I am struggling to add a second column to the main "Authorized Brands" menu, and when I tried to break it up, it affected the rest of the columns due to the width being set at 1000px. This is the code I ...

htmlcssdrop-down-menumultiple-columns

What is the best method for efficiently wrapping contents within a div container?

On the website cjshayward.com/index_new.html, there is a div wrapped around the content of the body, which is approximately 1000 pixels wide. In Chrome and Firefox, the wrapper works perfectly for the top section of about 100 pixels. Further down the page, ...

htmlcssjquery-uijquery-ui-tabsjquery-ui-accordion

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

As a newcomer to Vuetify, I am still learning the ropes. One thing I've noticed is that <v-main> automatically expands to fill the space between <v-app-bar> and <v-footer>, taking up the entire viewport height. My concern arises wh ...

htmlcssvue.jsuser-interfacevuetify.js

Having trouble getting the HTML input textbox onChange event to fire properly?

This is the code I have been working on: <script language="JavaScript"> function toggle() { if (this.value=='1') { document.getElementById('dbOn').style.visibility='visible'; } el ...

javascripthtmltextboxonchange

Achieve a dynamic effect by filling a path with an image and stretching it within the Canvas element

I am looking to fill a path in the shape of a circle or custom design with an image, but I want the image to stretch so that it fits within the boundaries of the closed path. Is it possible to accomplish this using HTML5 and the Canvas object? Below is th ...

htmlcanvashtml5-canvas

Having difficulty invoking a JavaScript function through PHP

My goal is to achieve the following: <html> <script type="text/javascript" src="jquery.js"></script> <a id="random">before</a> <script> function test(a) { document.getElementById('random').innerHTM ...

javascriptphpjqueryhtml