Center Horizontal Menu

[myamoeParticipant]

I’d like to center my menu items horizontally on my page.–I’ve tried a few things and can’t get it. My overall menu (the outlined area) is centered and takes up the full width of the page, but the individual menu items are left-justified within the overall.

[Peter StoevKeymaster]

Hi myamoe,

As a solution, you can set the left margin of the first Menu item:

<div id='jqxMenu' style='visibility: hidden; margin-left: 20px;'>
    <ul>
        <li style='margin-left: 150px;'><a href="#Home">Home</a></li>
        <li>Solutions
            <ul style='width: 250px;'>
                <li><a href="#Education">Education</a></li>
                <li><a href="#Financial">Financial services</a></li>
                <li><a href="#Government">Government</a></li>
                <li><a href="#Manufacturing">Manufacturing</a></li>
                <li type='separator'></li>
                <li>Software Solutions
                    <ul style='width: 220px;'>
                        <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
                        <li><a href="#Mobile">Mobile</a></li>
                        <li><a href="#RIA">Rich Internet applications</a></li>
                        <li><a href="#TechnicalCommunication">Technical communication</a></li>
                        <li><a href="#Training">Training and eLearning</a></li>
                        <li><a href="#WebConferencing">Web conferencing</a></li>
                    </ul>
                </li>
                <li><a href="#">All industries and solutions</a></li>
            </ul>
        </li>
        <li>Products
            <ul>
                <li><a href="#PCProducts">PC products</a></li>
                <li><a href="#MobileProducts">Mobile products</a></li>
                <li><a href="#AllProducts">All products</a></li>
            </ul>
        </li>
        <li>Support
            <ul style='width: 200px;'>
                <li><a href="#SupportHome">Support home</a></li>
                <li><a href="#CustomerService">Customer Service</a></li>
                <li><a href="#KB">Knowledge base</a></li>
                <li><a href="#Books">Books</a></li>
                <li><a href="#Training">Training and certification</a></li>
                <li><a href="#SupportPrograms">Support programs</a></li>
                <li><a href="#Forums">Forums</a></li>
                <li><a href="#Documentation">Documentation</a></li>
                <li><a href="#Updates">Updates</a></li>
            </ul>
        </li>
        <li>Communities
            <ul style='width: 200px;'>
                <li><a href="#Designers">Designers</a></li>
                <li><a href="#Developers">Developers</a></li>
                <li><a href="#Educators">Educators and students</a></li>
                <li><a href="#Partners">Partners</a></li>
                <li type='separator'></li>
                <li>By resource
                    <ul>
                        <li><a href="#Labs">Labs</a></li>
                        <li><a href="#TV">TV</a></li>
                        <li><a href="#Forums">Forums</a></li>
                        <li><a href="#Exchange">Exchange</a></li>
                        <li><a href="#Blogs">Blogs</a></li>
                        <li><a href="#Experience Design">Experience Design</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Company
            <ul style='width: 180px;'>
                <li><a href="#About">About Us</a></li>
                <li><a href="#Press">Press</a></li>
                <li><a href="#Investor">Investor Relations</a></li>
                <li><a href="#CorporateAffairs">Corporate Affairs</a></li>
                <li><a href="#Careers">Careers</a></li>
                <li><a href="#Showcase">Showcase</a></li>
                <li><a href="#Events">Events</a></li>
                <li><a href="#ContactUs">Contact Us</a></li>
                <li><a href="#Become an affiliate">Become an affiliate</a></li>
            </ul>
        </li>
    </ul>
</div>

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts