How To Center List

Question

If I have a

Solution 1:

A style of #list {text-align:center; } should do it, though that will horizontally center everything within your div.

To horizontally center just the select element, you can use #mylist { margin: 0px auto; }. Check out http://bluerobot.com/web/css/center1.html for more details about how this works.

In order to center vertically, the "simplest" approach would be to use an HTML table with a cell style that contains vertical-align:middle;. For a non-table-based approach you can use something like this http://www.jakpsatweb.cz/css/css-vertical-center-solution, but this approach is a bit hacky.

If you know (or can set) the height of your containing div, then a combination of relative and absolute positioning along with a containing div for select might work for you.

<html><head><styletype="text/css">div
        {
            border: 1px solid black; /* just so we can see the div */
        }
        #list
        {
            height: 400px;
            position: relative;
        }
        #listdiv
        {
            position:absolute;
            top: 100px;
            text-align: center;
            width: 100%;
        }
        </style></head><body><divid="list"><div><selectid="mylist"size="10"><option>option 1</option><option>option 2</option></select></div></div></body></html>

(I've tested this in IE9, FireFox 4 and Chrome 11)

Solution 2:

You could try #mylist {margin: 0 auto}. It centers only the select element. If you want to center all the content within your div then #list { text-align: center; } should do the trick.

EDIT:

To center the select tag both vertically and horizontally you can do like this:

<styletype="text/css">#list {
    width: 200px;
    height: 200px;
    background: #fa2;
}
#mylist {
    width: 100px;
    line-height: 20px;
    position: relative;
    top: 50%;
    left: 50%;
    margin: -10px00 -50px;
}
</style><divid="list"><selectid="mylist"><optionvalue="1">test</option></select></div>

Solution 3:

you can use like this..

#mylist{margin-left auto; margin-right:auto;}

Solution 4:

I'd probably go for:

#list {
    width: 100px;
    height: 250px;
    background: #ccc;
    text-align: center;
    display: table-cell;
    vertical-align: middle
}

text-align: center to horizontally center.
display: table-cell; vertical-align: middle to vertically center.

This will work in IE8+ and all modern browsers.

See:http://jsfiddle.net/knvV2/

Build Html5

How To Center List

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "How To Center List"