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>
        <style type="text/css">
        div
        {
            border: 1px solid black; /* just so we can see the div */
        }
        #list
        {
            height: 400px;
            position: relative;
        }
        #list div
        {
            position:absolute;
            top: 100px;
            text-align: center;
            width: 100%;
        }
        </style>
    </head>
    <body>
        <div id="list">
            <div>
                <select id="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:

<style type="text/css">
#list {
    width: 200px;
    height: 200px;
    background: #fa2;
}
#mylist {
    width: 100px;
    line-height: 20px;
    position: relative;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -50px;
}
</style>
<div id="list">
       <select id="mylist">
           <option value="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/

Html5 Learning

How To Center List

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "How To Center List"