CSS: Horizontal UL: Getting it centered

Question

I'm trying to make a horizontal menu/list. It has a mix of independent buttons and buttons that are wrapped in their own individual forms.

With much hacking I got all of the buttons, in forms and not in forms to align horizontally.

I haven't been able to get the whole thing to center on the page though.

Could someone point out to me what I am not seeing?

<!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"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <link rel="shortcut icon" href="http://localhost:7001/nsd/images/favicon.ico">
    <style type = "text/css">
        #horizontal_li_menu
        {
            margin:0 auto;
            text-align:center;
            border: 1px solid green;
            width:750px;
            list-style-type: none;
            text-decoration: none;
            padding:0 auto;
        }

        #horizontal_li_menu li 
        { 
            display: inline;
            float:left;
            padding-right: 10px;

         }

    </style>

</head>

    <body>







<ul id = "horizontal_li_menu">
    <li>
        <input value="Update" onclick="location.href='#'" name="button" type="button"/>
    </li>

    <li>
        <form name="formExportVECI" method="post" action="exportveci">
            <input name="person_id" value="661774" type="hidden">
            <input name="submitExport" value="Export To Microsoft Excel" type="submit">
        </form>

    </li>  
    <li>
        <form id="ufdh" name="formImportVECI" action="importveci" method="post" enctype="multipart/form-data">
                <input name="person_id" value="661774" type="hidden">
                <input value="Import From Microsoft Excel" path="Upload" type="submit">
                <input id="fileData" name="fileData" value="" type="file">
        </form>
    </li>

    <li>
        <input value="Search/Home" onclick="location.href='search'" name="buttonHome" type="button"/>
    </li>
    </ul>






</body></html>

Answer 1

According to your CSS:

#horizontal_li_menu_container ul and horizontal_li_menu_container_ul are selecting the same element. I'm not sure if you realize this.

Also, when using floats, you need to clear them .

Answer 2

To center a block element horizontally* within a page, or another element*

Use


   #element_id{margin: 0 auto;}

That will center the element around its container.

So, to center the list horizontally* on the page*

apply the above style to the ul , and not to the li .
BTW, unless the div with id horizontal_li_menu_container has additional content, it is redundant; the ul will work perfectly without it.
If that doesn't work, check the following:

Find the sum of the widths, paddings, and margins of all the li s in that ul
Make sure the sum equals the width of the ul
Make sure the container div has no specified width, or it has already been centered on the page

If all those are true, the above style will work.

Hope this helps.

CSS: Horizontal UL: Getting it centered

Question

2 answers

solution1
0 2012-12-12 22:38:20

solution2
0 2012-12-12 23:44:32

To center a block element horizontally* within a page, or another element*

So, to center the list horizontally* on the page*

CSS: Horizontal UL: Getting it centered

Question

2 answers

solution1 0 2012-12-12 22:38:20

solution2 0 2012-12-12 23:44:32

To center a block element horizontally within a page, or another element

So, to center the list horizontally on the page

solution1
0 2012-12-12 22:38:20

solution2
0 2012-12-12 23:44:32

To center a block element horizontally* within a page, or another element*

So, to center the list horizontally* on the page*