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;
}
#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)
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>
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/
Post a Comment for "How To Center List"