Vertically aligning text in HTML/CSS dropdown menu

Question

I am working on adding drop down menus to my website (http://www.nbm.org/test/nbm-online-drafts/dropdown-testing.html) from the gray buttons at the top of the page. I have it working well using HTML and CSS lists (code below) but I am unable to figure out how to vertically align the text in the drop downs.

The alignment is good right now with any

element that takes up 2 lines, but for 1 line elements, they align to the top.

I have tried insterting divs and adding vertical-align: middle to the CSS, but with no visible changes.

HTML:

<nav id="main-nav">
    <ul id="nav-primary">
    <li><a href="http://www.nbm.org/plan-visit/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/planyourvisit.jpg" alt="Plan Your Visit" width="109" height="48" title="Plan Your Visit"></a>

            <ul class="subnav">
                <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=2041&JServSessionIdr004=gkto4vnlz1.app213a">Buy Tickets</a>
                </li>
                <li><a href="http://www.nbm.org/plan-visit/hours_amenities/">Hours & Admission</a>
                </li>
                <li><a href="http://www.nbm.org/plan-visit/accessibility-directions/">Accessibility & Directions</a>
                </li>
                <li><a href="http://www.nbm.org/programs-lectures/tours/">Tours</a>
                </li>
            </ul>
        </li>
        <li><a href="http://www.nbm.org/exhibitions-collections/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/exhibitionscollections.jpg" alt="Exhibitions / Collections" width="109" height="48" title="Exhibitions / Collections"></a>

            <ul class="subnav">
                <li><a href="http://www.nbm.org/exhibitions-collections/current-exhibitions.html">Current Exhibitions</a>
                </li>
                <li><a href="http://www.nbm.org/exhibitions-collections/upcoming-exhibitions.html">Upcoming Exhibitions</a>
                </li>
                <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=2041&JServSessionIdr004=gkto4vnlz1.app213a">Buy Tickets</a>
                </li>
                <li><a href="http://www.nbm.org/exhibitions-collections/collections/">Collections</a>
                </li>
            </ul>
        </li>
        <li><a href="http://www.nbm.org/programs-lectures/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/adultprogs.jpg" alt="Adult Programs" width="109" height="48" title="Adult Programs"></a>

            <ul class="subnav">
                <li><a href="http://go.nbm.org/site/Calendar/1810746008?view=MonthGrid&Day">Upcoming Programs</a>
                </li>
                <li><a href="http://www.nbm.org/about-us/multimedia/">Watch / Listen</a>
                </li>
                <li><a href="http://www.nbm.org/programs-lectures/continuing-education-credits.html">Continuing Education Credits</a>
                </li>
            </ul>
        </li>
        <li><a href="http://www.nbm.org/families-kids/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/familiesteens.jpg" alt="Families / Teens" width="109" height="48" title="Families / Teens"></a>

            <ul class="subnav">
                <li><a href="http://www.nbm.org/families-kids/festivals/">Festivals</a>
                </li>
                <li><a href="http://www.nbm.org/families-kids/everyday-activities/">Everyday Activities</a>
                </li>
                <li><a href="http://www.nbm.org/families-kids/teens-young-adults/">Teens & Young Adults</a>
                </li>
                <li><a href="http://www.nbm.org/families-kids/summer-camp.html">Summer Camp</a>
                </li>
                <li><a href="http://www.nbm.org/families-kids/scouts-and-youth-groups/">Scouts & Youth Groups</a>
                </li>
                <li><a href="http://www.nbm.org/families-kids/birthday-parties/">Birthday Parties</a>
                </li>
            </ul>
        </li>
        <li><a href="http://www.nbm.org/schools-educators/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/schoolseducators.jpg" alt="Schools / Educators" width="109" height="48" title="Schools / Educators"></a>

            <ul class="subnav">
                <li><a href="http://www.nbm.org/schools-educators/educators/">For Educators</a>
                </li>
                <li><a href="http://www.nbm.org/families-kids/teens-young-adults/">For Teens & Young Adults</a>
                </li>
                <li><a href="http://www.nbm.org/schools-educators/school-visit/">Plan a School Visit</a>
                </li>
            </ul>
        </li>
        <li><a href="http://www.nbm.org/support-us/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/joindonate.jpg" alt="Join / Donate" width="109" height="48" title="Join / Donate"></a>

            <ul class="subnav">
                <li><a href="https://secure2.convio.net/nbm/site/Donation2?df_id=2420&2420.donation=form1&JServSessionIdr004=gkto4vnlz1.app213a">Donate Now</a>
                </li>
                <li><a href="http://www.nbm.org/support-us/membership/">Membership</a>
                </li>
                <li><a href="http://www.nbm.org/support-us/sponsorships/">Corporate Giving</a>
                </li>
                <li><a href="http://www.nbm.org/support-us/awards_honors/">Awards & Honors</a>
                </li>
                <li><a href="http://www.nbm.org/support-us/volunteer/">Volunteer</a>
                </li>
            </ul>
        </li>
        <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/shop.jpg" alt="Shop" width="109" height="48" title="Shop"></a>

            <ul class="subnav">
                <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=1035&TYPE=&NAME=">Book Shop</a>
                </li>
                <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=1036&TYPE=&NAME=">Home Shop</a>
                </li>
                <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=1033&TYPE=&NAME=">Toy Shop</a>
                </li>
                <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=1034&TYPE=&NAME=">Museum Shop</a>
                </li>
                <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=2060&TYPE=&NAME=">Stationery Shop</a>
                </li>
                <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=1040&TYPE=&NAME=">Fashion Shop</a>
                </li>
                <li><a href="https://secure2.convio.net/nbm/site/Ecommerce?store_id=1161&VIEW_DEFAULT=true&FOLDER=2070&TYPE=&NAME=">Design Shop</a>
                </li>
            </ul>
        </li>
        <li><a href="http://www.nbm.org/about-us/"><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/aboutus.jpg" alt="About Us" width="109" height="48" title="About Us"></a>

            <ul class="subnav">
                <li><a href="http://www.nbm.org/about-us/about-the-museum/">About the Museum</a>
                </li>
                <li><a href="http://www.nbm.org/about-us/national-building-museum-online/">E-newsletters</a>
                </li>
                <li><a href="http://www.nbm.org/about-us/press-room/">Press Room</a>
                </li>
                <li><a href="http://www.nbm.org/about-us/management-staff/">Staff & Governance</a>
                </li>
                <li><a href="http://www.nbm.org/about-us/employment_internships/">Employment & Internships</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
  <!--end primary navigation-->

And CSS:

#main-nav {
    background: none repeat scroll 0 0 white;
    height: 53px;
    left: -3px;
    position: relative;
    top: 128px;
    width: 100%;
}
#main-nav .subnav {
    background: none repeat scroll 0 0 #D7D6D4;
    border: 0 solid #D4D5D6;
    display: none;
    left: 13px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 59px;
    width: 109px;
    z-index: 5;
}
#main-nav .subnav li {
    border-bottom: 1px solid #EEEEEE;
    display: block;
    margin: 0;
    border-left: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
}
#main-nav .subnav li a {
    color: #000000;
    font-size: 11px;
    height: 18px;
    padding: 6px 5px 19px;
}
#main-nav .subnav li a:hover {
    background: none repeat scroll 0 0 #BFBEBA;
}
#nav-primary {
    float: left;
    list-style-type: none;
    margin: -10px;
    padding: 0;
}
#nav-primary li {
    float: left;
    position: relative;
}
#nav-primary li a {
    color: #000000;
    float: left;
    font-size: 13px;
    font-weight: bold;
    height: 48px;
    line-height: 16px;
    padding-left: 13px;
    padding-top: 10px;
    text-align: center;
    text-decoration: none;
    width: 100px;
}
#nav-primary li a:hover {
    text-decoration: none;
}
#nav-primary li:hover .subnav {
    display: block;
}

it looks like the text is centered already. What are trying to do exactly? — Keith
– Keith, Commented Jul 19, 2013 at 16:47
Center it vertically. Under Plan Your Visit for example, "Hours & Admission" and "Accessibility & Directions" appear centered, but "Buy Tickets" and "Tours" are not. — hwiencek
– hwiencek, Commented Jul 22, 2013 at 18:29

The Big Cheese · Accepted Answer · 2013-07-23 12:28:35Z

1

You could try adding the attribute below (in the html) to each element you want to add padding to (adjusting the pixel value to your own preference):

       style="padding-top:100px"

As you can see in the fiddle: http://jsfiddle.net/zejRn/4/. I added the line above to 'Buy Tickets' under 'Plan your visit' and every other element goes untouched

edited Jul 23, 2013 at 12:28

answered Jul 19, 2013 at 16:55

The Big Cheese

811 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hwiencek Over a year ago

Thanks! I think this is definitely on the right track. However, this adds padding to all of the <li>'s and throws the 2 line elements (like "Hours & Admission" and "Accessibility & Directions" under Plan Your Visit) off center. I only want to lower the 1 line elements (like "Buy Tickets" and "Tours" under Plan Your Visit for example)

Collectives™ on Stack Overflow

Vertically aligning text in HTML/CSS dropdown menu

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related