Trouble with centering navigation bar using HTML margin:auto

Below is the code snippet I'm currently working on:

.nav-item {
  display: inline;
  color: white;
  padding: 30px 10px;
  font-style: bold;
  font-family: sans-serif;
  font-size: 20px;
  width: 1000px;
  margin: 0 auto;
}

.nav-container {
  background-color: black;
}
<nav class="nav-container">
  <span class="nav-item">ABOUT ME</span>
  <span class="nav-item">CONTACT ME</span>
  <span class="nav-item">PORTFOLIO</span>
</nav>

I've encountered an issue while trying to center my navigation bar in the middle of the page using margin: auto. Despite my efforts, it doesn't seem to work as expected. Surprisingly, when I set display: block, it centers the bar but breaks the line layout. Could someone please shed some light on why this might be happening? Any assistance would be greatly appreciated...

htmlcssmarginnav

Answer №1

When dealing with inline elements, it is important to remember that they behave like text. Therefore, alignment should be applied to the parent element.

To achieve center alignment in your CSS code, you can remove the margin:0 auto; and add text-align: center; to the .nav-container class:

.nav-item{
  display:inline;
  color:white;
  padding:30px 10px;
  font-style:bold;
  font-family:sans-serif;
  font-size:20px;
  width:1000px;
}

.nav-container {
  text-align: center;
}

http://jsfiddle.net/5v7Lppkf/

Answer №2

When dealing with inline elements similar to this one, it is recommended to apply text-align:center to the parent element. To do this, simply add the following code snippet to your css:

.nav-container { text-align:center }

Answer №3

If you want to center the text in your navigation container, simply include this rule in your CSS file:

.nav-container { text-align: center; }

It's as easy as that!

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

Necessary workaround needed for HTML time limit

Our HTML page has been designed to automatically timeout after 10 minutes of inactivity. This functionality is achieved through the following code: function CheckExpire() { $.ajax({ type:'GET', url:self.location.pathname+"?ch ...

javascripthtmlajax

The issue persists with Angular's overflow hidden not functioning properly, and similarly, the show password button is

I created a login page using Angular Material, but I'm facing some issues. The problem is that when I set the style overflow: hidden, the show password button stops working. Additionally, if I click the button twice, the webpage refreshes, which shoul ...

htmlcssangularflexbox

Attempting to align two parent divs within a container div to appear side by side, while ensuring that one of the parent divs repeats multiple rows without impacting the second parent

I am in the process of building a custom WordPress theme from scratch, and I have created a template for the posts that will dynamically appear on the front page. To achieve the desired layout, I am utilizing Bootstrap 5. The structure includes a containe ...

htmlcsswordpress-themingbootstrap-5

Efficiently storing and quickly retrieving data from a table for seamless echoing

Details I have created a table using ul and li. Here is the link to view the table: http://jsfiddle.net/8j2qe/1/ Issue Now, how can I efficiently store and display data like the one shown in the image? Each column should only contain one entry. Your r ...

phphtmlmysql

Ways to address the issue of "$ is not a function"

Whenever I attempt to upload an image, this error message pops up: $ is not a function The source of the error can be found here: $(document).height(); ...

javascriptjqueryhtml

Customize the default getstream component styles in a NextJS Component

Is there a way to customize the CSS of getStream.io components using custom CSS? I have created a component as shown below and now I want to override the styles for various classes of its components. Following the instructions in this README file, I impor ...

cssreactjsnext.jsgetstream-io

Creating a method to emphasize specific words within a sentence using a custom list of terms

Looking for a way to highlight specific words in a sentence using TypeScript? We've got you covered! For example: sentence : "song nam person" words : ["song", "nam", "p"] We can achieve this by creating a custom pipe in typescript: song name p ...

htmlangulartypescript

Is it possible to change the CSS of a parent element using a child element?

My current challenge involves altering the background-color of a parent <td> element, without being able to directly modify the HTML structure. The software system utilized at my workplace strictly relies on SQL queries for data manipulation and gene ...

htmlcsssql

Javascript/jQuery for enlarging and shrinking a div

Struggling with a function I'm implementing for a website. My goal is to move and expand a div upon button click, with the text on the button changing to "close". When the close button is clicked, the div should return to its original position. I&apo ...

javascriptjqueryhtmlcssanimation

Field for Entering Time

I need help creating a form that will only accept time values formatted as HH:MM. Can someone guide me on how to filter user input and display the colon in the text field? I am thinking that I might need a specialized input box for this purpose. ...

javascriptjqueryhtml

An unusual glitch encountered while trying to show an image

While working on my project using next.js and Tailwind, I encountered an issue with placing a logo in the upper right corner of the viewport. Interestingly, I was successful when using simple text for the logo. However, when I attempted to display the log ...

htmlcssnext.jstailwind-css

Javascript code successfully executed using ajax

Using ajax, I have successfully implemented the 'addScript' function to add a js file to the loaded page. The following code snippet works perfectly: addScript('SlimBox/js/mootools.js'); However, I am encountering an issue when trying ...

javascripthtmlajax

Is it possible to swap out a webpage link for a different one based on the size of the screen?

I designed a website for a friend: www.donjas-wellbeingforkids.co.uk I set up a Facebook Messenger Contact Us Link directly from the contact page here: donjaswell-beingforkids contact It's functional on desktop, where it seamlessly opens Facebook Me ...

htmlcss

Load a form using ajax and submit it using jQuery

For a while now, I have been facing challenges in figuring out what's going wrong with my code. The issue arises when I try to submit a form using jQuery that was loaded through ajax. The form loads perfectly fine within a div after invoking the ajax ...

phpjavascriptjqueryhtmlajax

Starting the Android System Magnifier with a Click: A Step-by-Step Guide

Is there a way to incorporate a magnifying glass into an HTML page using jQuery or within an Android app? Ideally, it would be for a single picture. In my application, I am displaying an HTML file from my assets in a webview. The HTML page utilizes jQuery ...

javascriptandroidjquerycssmagnification

Unable to show the table row color using Angular in Internet Explorer

I've customized a table by changing the row color based on a property value, and I'm using ng-repeat to display the rows. Here's my table: <table class="tab table span6 tabhover" style="margin:0;" > <thead> ...

cssangularjsinternet-explorerhtml-table

Incorporating an HTML Canvas element within a CSS grid design

I've been attempting to integrate an html canvas that I created into one of the css grid classes specified in my code. The code runs when the "Calculate" button is clicked. Upon clicking the button, the <div> section designated for the canvas r ...

javascripthtmlcsscanvas

Is there a way to implement a css/javascript property specifically for a div that is selected in the url?

Take for instance the scenario where I possess the URL example.com/#foo. In this case, CSS styling will be directed to the div with the id foo. If achieving this solely in CSS is not feasible, what methods in JavaScript or jQuery can be used efficiently ...

javascriptjquerycss

What might be the reason my jquery counter function is not functioning properly?

Hi there, I'm currently working on creating a counter for my website. However, I'm not very proficient in JavaScript and seem to be encountering some errors in my code. Would anyone be able to assist me in writing a piece of code that functions c ...

javascripthtmljquerybootstrap-5

What is the process for applying cdkDropList to the tbody when using mat-table instead of a traditional HTML table?

I have been experimenting with the mat-table component in my Angular project, following a simple example from the documentation: <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> <!--- These columns can be ...

htmlangulartypescriptmat-tableangular-cdk-drag-drop