Positioning the navigation menu in the center

I'm facing a bit of trouble trying to center a navigation bar on my Blogger site. Usually, this is a simple task, but for some reason, it's proving difficult this time around.

Feel free to check out the website in question: Center Navigation

I've experimented with text-align, margin:0 auto; and other methods, but nothing seems to be working!

If anyone could provide some assistance, I would greatly appreciate it. Thanks!

Here's the current code snippet:

.nav{
position: relative;
margin: auto;
list-style-type: none;
text-transform: uppercase;
text-align: center;
border-top: 1px solid #aaaaaa;
list-style:none;
text-align:center;

}

li {
    display:inline-block;
}


<ul class="nav">
<li><a href="http://www.hannahallinson.com/">Home</a></li>
<li><a href="http://www.hannahallinson.com/p/about.html">About</a></li>
<li><a href="http://www.hannahallinson.com/p/contact.html">Contact</a></li> 
<li><a href="http://www.instagram.com/hannahallinson">Instagram</a></li>
<li><a href="http://www.twitter.com/hannahallinson">Twitter</a></li>
</ul>
htmlcssmenunavigationcenter

Answer №1

In order for both text-align:center and margin:0 auto to function properly, the element being centered must have a specific width defined, as opposed to the default width of auto, which defaults to 100% for a block element. An element that spans the entire width of its parent cannot be centered.

If you give ul.nav a fixed width, it will then be able to be centered.

To utilize text-align:center, it is necessary to restrict the ul as well, potentially by setting it as display:inline-block. You can view an example of this in action here.

Answer №2

Eliminate the use of float: left; in the styles for 

.tabs .widget li, .tabs .widget li

Consider This:

.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
}

Rather than:

.tabs .widget li, .tabs .widget li {
margin: 0;
padding: 0;
float: left;
}

Answer №3

Include the CSS property text-align:center; in the parent div's styling

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 I create a Bootstrap 4 navigation menu that toggles on the left side but keeps the button on the right

Is it possible to create a collapsible bootstrap 4 navigation with the toggle button on the left side while also having action buttons on the right side that are not part of the collapsible menu? How can I prevent the navbar-collapse menu from pushing down ...

htmlcsstwitter-bootstrapnavigationbootstrap-4

design facebook type box scroll bar

After extensively searching through various stackoverflow answers in an attempt to change the CSS for a Facebook likebox scrollbar, I have had no success. Below is the code that I am currently using: <div id="fb-root"></div> <script>(fun ...

javascriptjqueryhtmlcssfacebook

Creating a visually appealing user interface can be achieved by utilizing HTML/CSS to include bullet points and enumeration numbers in the page

I am looking for a way to display lists in a document with a style similar to the image on the right below: The text content of the list items is formatted like any other <p> and the bullet points are located in the margin. Is there a CSS solution ...

htmlcss

Variable fails to be assigned to Element

Having trouble updating the innerHTML attribute for both elements with ids containDiv and status. For some reason, it only changes containDiv but not status. The console shows an error "Cannot set property innerHTML of undefined", indicating that the eleme ...

javascripthtmlgetelementbyid

Placing a larger container inside a smaller one and perfectly centering it

I am trying to find a solution to center a 1600px container within a 940px container on my webpage. The goal is to keep the page centered at all times, with the main content being 940px wide. When I add an image that is 1600px, it aligns left with the 940p ...

htmlcss

How can the distinctions between two bars be illustrated in high charts?

Is there a way to display different values on a new line between two bar charts using Highcharts plugins? I have created a simple bar chart in Highcharts, but I am looking to show the difference between the two bars on a new line. The concept is illustrate ...

javascriptjqueryhtmlsvghighcharts

Can JavaScript executed within a web browser have the capability to manipulate files on the underlying host system's file system?

Is it possible to programmatically move files or folders from a website using code? I am aware that with Python and Node.js, this can be achieved through the OS, path, and fs modules. Can JavaScript running in a website also handle file management tasks ...

javascripthtmlcss

"To enhance the functionality of your website in Chrome, incorporate Bootstrap affix and

When I add a website name as a prefix, the name is initially hidden. As the user scrolls down, the website name becomes visible, and as they scroll back up, it disappears again. I have implemented this feature using jQuery. $(document).ready(function(){ ...

jquerytwitter-bootstrapcss

What could be causing the svg to not be visible inside the div?

I am struggling to display an SVG element within a div as it is not visible at all. Can someone help me make the SVG visible in the div? Here is a link to the code: http://codepen.io/helloworld/pen/HjkhK <div style="height:100px;background:yellow;"> ...

htmlcsssvg

Having trouble with the Ajax load function not functioning in your HTML code?

The issue has been resolved. Thank you to everyone who helped! Initially, I was attempting to run a file offline instead of on a web server (XAMPP server). Once I uploaded the file to the web server, it started working properly. I had been trying to load ...

javascriptjqueryhtmlajaxxml

Tips for creating a hover-activated dropdown menu

How can I create a drop-down menu in my horizontal navigation bar that appears when hovering over the Columns tab? The drop-down menu should include options such as Articles, Videos, Interview, and Fashion. To better illustrate what I am looking for, here ...

javascripthtmlcss

Steer clear of dividing words

I am attempting to showcase sentences letter by letter with a fade in/fade out effect. However, I am facing an issue where words break in the middle. How can this word breaking be prevented? var quotes = document.getElementsByClassName('quote' ...

javascripthtmlcsseffects

Minimize white spaces when validating input fields in a form using Javascript

I'm currently facing a challenge with JavaScript, specifically regarding achieving five tasks without using jQuery. Despite trying various RegExp codes, none have successfully worked for me so far. Let's begin with the first task (number 1): El ...

javascripthtmlregex

Example of using the CSS property white-space with break-spaces

I've been searching for an example of using css white-space: break-spaces for hours with no luck. Most tutorials only cover examples for normal, nowrap, pre, pre-wrap, pre-line. When it comes to break-spaces, the information available is limited to qu ...

csswhitespace

Adding a timestamp to the src URL in HTML: A step-by-step guide

Looking for a way to implement cache busting in my index.html file. Take a look at the code snippet below: <body> <app-root></app-root> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="&l ...

htmlcachingbootstrap-4frontend

Performing two consecutive nested AJAX requests in jQuery using JavaScript

I am facing an issue with my code. My goal is to create a cryptocurrency ranking feature on my website. I have integrated an API that provides logos, symbols, indices, prices, etc. of cryptocurrencies. However, I encountered a problem as this API doesn&apo ...

javascriptjqueryhtmlajax

What is the best way to add spacing between each button in a Bootstrap 5 navbar?

Is there a way to add spacing between each button in the bootstrap 5 navbar? Currently, the buttons are too close to each other, and I would like to create some space between them. How can I achieve this? <link href="https://cdn.jsdelivr.net/npm/ ...

cssbootstrap-5

Having trouble extending my navbar to the full height of the window

Having an issue with my code regarding the menu. I am trying to create a navbar that fills the height on the left side for PC screens and becomes scrollable at the top for mobile versions. The problem lies in my flex container not properly filling the scr ...

htmlcssflexbox

BASH-SHELL SCRIPT: Display a specific portion of content from a file

Recently, I stumbled upon a text file containing a snippet of HTML code: >>nano wynik.txt which includes the following text: 1743: < a href="/currencies/lisk/#markets" class="price" data-usd="24.6933" data-btc= "0.00146882" My goal is to extr ...

htmlbashshellsh

Attempting to reduce the width of the dig when it reaches 400

I have a square element with a click event that increases its size by 50 pixels on each click. However, once it reaches a size of 400 pixels, the size decreases by 50 pixels with every click instead. Additionally, when the size of the square reaches 100 p ...

javascripthtmlcss