Skip to main content
Inspiring
May 19, 2025
Question

Having the hardest time centering navigation text

  • May 19, 2025
  • 2 replies
  • 420 views

Hello. I want to center the text in the top navigation on this page. I realize that the <center> tag is no longer supported in HTML5 and I have tried to center it using both HTML and CSS to no avail. Anyone know what I'm missing? Thanks in advance. https://ourdemocracymatters.net/Pillars.html 

    2 replies

    Community Expert
    May 21, 2025

    Apologies for joining the conversation a bit late—I see that the discussion on centering elements in CSS has been quite thorough. While many solutions have been shared, I thought it might be helpful to provide some additional resources that delve into this topic:

    I hope these resources add value to the ongoing discussion!

    Community Expert
    May 19, 2025

    Well there are a few things in play with your navigation. What you have setup are a list of items, with a float attribute, with a margin-right padding and text-align to center. Which is showing the result you are getting. The container of each item will be equal to the size of that text unless otherwise stated, and because of this, aligning the text to center wouldn't actually change the overall appearance. In comparison, if you had a fixed size of the <li> elements then text within those elements would wrap. And you also have that image floated next to the navigation so the navigation is restricted to the width of the container it is inside.

     

    Would you be able to show via an image how you are envisioning the text to be centered in the layout?

    Kevin E.Author
    Inspiring
    May 19, 2025

    Basically, I am wanting to stretch the navigation all the way across the page in the red bar. I built this site from a DW template, so I'm unsure what acting like an invisible wall on the left keeping me from using the entire spread. The css headertag seems to control everything in the area, but is changing everything except what I need.

    header {
    width: 100%;
    height: 7%;
    text-align: center;
    background-color: #FF0000;
    border-bottom: 1px solid #FF0000;
    }

     

    Nancy OShea
    Community Expert
    Community Expert
    May 19, 2025
    Nancy O'Shea— Product User & Community Expert