1

I can't get a menu to be centered. I have images, etc. that center just fine, but I can't center the menu.

Here's some of the site's CSS that pertains to the menu:

@charset "UTF-8";

    /* CSS Document */

#nav {
    width:975px; /* six main menu buttons at 150px per */
    margin:1 auto; /* Based on a suggestion from stackoverflow */ 
    list-style-type:none;
    text-align:center;
    position: fixed; /* used to render menu bar on top */
    top: 0; /* used to render menu bar on top */
    z-index: 1000; /* use z-index to render menu bar on top of everything, even the slideshow */
    display:inline-block;
    }

#nav li {
    display:inline-block; /* used to wrap text */
    position:relative;
    float:left;
    background-color: #BDB76B; /* menu background color */;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    }

#nav li:hover {  /* highlights current hovered list item when hovering over the parent menu */
    background-color:#BDB76B;
    font-weight:500;
    color:blue;
}

#nav li a {
    display:inline-block; /* used to wrap text */
    margin:5px 0; /*space between menu elements */
    text-decoration:none;
    width:150px; /* this is the width of the menu items */
    line-height:15px; /* this is the text height of the menu items */
    color:#000000; /* list item font color 000=black, FFF=white*/
    }

#nav li a:hover {  /* highlights hovered item of the parent menu */
    background-color:#BDB76B;
    font-weight:500;
    color:blue;
    font-size:18px;
    width:225px;
}

#nav li li a { /* smaller font size for sub menu items */
    font-size:90%;
    background-color: #BDB76B; /* menu background color for submenues */
} 

#nav li li a:hover {  /* highlights current hovered list when hovering over sub menues */
    background-color:#BDB76B;
    font-weight:500;
    color:blue;
    font-size:120%;
    width:200px;
}

/*--- Sublist Styles ---*/
#nav ul {
    position:absolute;
    padding:0;
    left:0;
    display:none; /* hides sublists */
    }

#nav li:hover ul ul {
    display:none;
} /* hides sub-sublists */

#nav li:hover ul {
    display:block;
} /* shows sublist on hover */

#nav li:hover ul ul ul {
    display:none;
} /* hides sub-sub-sublists */

#nav li li:hover ul {
    display:block; /* shows sub-sublist on hover */
    margin-left:150px; /* this should be the same width as the parent list item */
    margin-top:-35px; /* aligns top of sub menu with top of list item */
    }

#nav li li li:hover ul {
    display:block; /* shows sub-sub-sublist on hover */
    margin-left:150px; /* this should be the same width as the parent list item */
    margin-top:-35px; /* aligns top of sub menu with top of list item */
    width:200px;
    }

.upcoming_events_list li { /* attributes for the upcoming_events list level */
    /* CSS to alter the links in the include list when inside the div */
    width: 380px;
    text-align: left;
    list-style-type:circle;
    color:blue;
}

.upcoming_events_list li a:link { /* attributes for the upcoming_events unvisited */
    font-family: "Times New Roman", Times, serif;
    color: black;
    font-size: 18px;
    font-weight: 300;
    list-style-type: circle;
}

.upcoming_events_list li a:visited { /* attributes for the upcoming_events visited */
    font-family: "Times New Roman", Times, serif;
    color: blue;
    font-size: 18px;
    font-weight: 100;
    list-style-type: circle;

}

.upcoming_events_list li a:hover { /* attributes for the upcoming_events hover */
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    font-weight: 500;
}

.upcoming_events_list li a:active { /* attributes for the upcoming_events selected */
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    font-weight: 500;
    text-decoration: underline;
}

Here's a subset of the site's index.shtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/ss_template_1.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="Page_Specific_Title" -->
    <title>My Site Home Page SHTML</title>
    <!-- InstanceEndEditable -->
    <link href="CSS/MySite.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
        background-color: #EEE8AA;
         }
    -->
    </style>
    <!-- InstanceBeginEditable name="Page_Specific_Head" -->
<!-- include jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <!-- include Cycle plugin -->
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.slideshow').cycle({
                fx:         'shuffle',  // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                speed:      1500,       // speed at which the transition occurs (in miliseconds)
                delay:      1000,       // time spent on the first slide before starting the slideshow
                continuous: 0,          // true (1) to start next transition immediately after current one completes
                timeout:    9000        // time spent on each slide
            });
        });
    </script>
    <style type="text/css">
    <!--
    p {margin:0; padding:0}
    -->
    </style>
    <meta name="description" content="A warm welcome to all. We invite everyone to participate in all aspects of our
    parish life."/>
    <meta name="keywords" content="parish,church,welcome,all are welcome,spiritual,peace,justice"/>
<!-- InstanceEndEditable -->
</head>
<body>
    <!-- InstanceBeginEditable name="Page_Specific_Body" -->
<br />
<div>
<?php include("menu_primary1.shtml");
?>
</div>
<div class="block_center_1000_text_left">
    <!-- The title was created using the Pristina Regular 36 point font.  The background color code is D3AC25-->
    <p align="center">
        <img src="images/front_page_title.jpg" alt="Parish Site"/>
    </p>
</div>
<div class="outer_width_1000" >
</div>
</body>

and here's a subset of the included file menu_primary1.shtml:

<ul id="nav">
  <li><a href="#">Faith Formation</a>
    <ul>
      <li><a href="adult_faith_formation.shtml">Adult Faith Formation</a></li>
      <li><a href="Attachments/RelEdGrades1to5Schedule.pdf" target="_blank">Youth Faith Formation Grades 1 to 5</a></li>
      <li><a href="Attachments/RelEdGrades6to8Schedule.pdf" target="_blank">Youth Faith Formation Grades 6 to 8</a></li>
      <li><a href="Attachments/ConfirmationPreparation.pdf" target="_blank">Confirmation Preparation</a></li>
    </ul>
  </li>
  <li><a href="#">Parish Groups</a>
    <ul>
      <li><a href="Attachments/ChurchGroupsListing.pdf" target="_blank">Listing of Groups and Ministries</a></li>
      <li><a href="good_art_series.shtml">Good Art Series</a></li>
      <li><a href="contact_us.shtml#peace">Peace and Justice Outreach</a></li>
      <li><a href="svdp.shtml">Saint Vincent de Paul</a></li>
    </ul>
  </li>
  <li><a href="#">Upcoming Events</a>
      <?php include("menu_upcoming_events1.shtml");
      ?>
      </li>
... Three other top-level <li> menu items
</ul>

Thanks for your help.

4 Answers 4

11

if you center any element or menu item you have to follow 2 steps:

setp1:

ul{
   width: 100%;
   display: table;
   text-align: center;
}

step2:

ul li{
     display: inline-block;
     float: none;
}

and done. That's it now try it yourself.

1
  • Thanks. That did it. I changed my first two CSS classes to: Sep 7, 2016 at 12:01
2

* {
  margin: 0;
  padding: 0;
}
.wrapper {
  padding-top: 10px;
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
}
.menu {
  background: #093;
}
.menu ul {
  margin-left: 0;
  list-style: none;
  text-align: center;
}
.menu ul li {
  display: inline-block;
}
.menu ul li a {
  display: block;
  padding: 10px;
  color: #CC0;
  text-decoration: none;
}
.menu ul li a:hover {
  background: #C30;
  color: #FFF;
}
<div class="wrapper">
  <div class="menu">
    <ul>
      <li><a href="">Home</a>
      </li>
      <li><a href="">Home</a>
      </li>
      <li><a href="">Home</a>
      </li>
      <li><a href="">Home</a>
      </li>
    </ul>
  </div>
</div>

0

I haven't looked at you code, but http://howtocenterincss.com may make your life a little happier :)

3
  • Thanks. I followed their suggestion, putting margin-left:auto; and margin-right:auto; but the menu still did not center. Sep 7, 2016 at 3:51
  • I don't know what options you chose on that site, but most of the time it will tell you to use display: flex. You may want to investigate that. css-tricks.com/snippets/css/a-guide-to-flexbox
    – 99lives
    Sep 7, 2016 at 5:44
  • It's a very useful site. Sep 7, 2016 at 12:07
0

As an alternative this can be done with flexbox. Make sure to use your vendor prefixes as required (not included in this example). I prefer this method because a wrapper isn't required.

.menu {
  
}
.menu ul {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  width: 500px; /* whatever width you want can be 100% */
}
    
.menu ul > li {
  display: inline-block;
  padding: 20px;
}
<div class="menu">
    <ul>
      <li><a href="">Home</a>
      </li>
      <li><a href="">Home</a>
      </li>
      <li><a href="">Home</a>
      </li>
      <li><a href="">Home</a>
      </li>
    </ul>
  </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.