I hope you mean that you want them centered. Anyways, to do that, put the style and script section from this demo in the head of your page. You will also need to set the width of the select element via its inline style, as shown, using ex as units. You can use whatever number works out for you: 30ex, 100ex, whatever:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Centered Drop Downs - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
select, option {
text-align:center;
}
</style>
<script type="text/javascript">
function centO(){
if (!document.documentElement.filters)
return;
var o=document.getElementsByTagName('option')
for (var i_tem = 0; i_tem < o.length; i_tem++)
if (o[i_tem].text.length<parseInt(o[i_tem].parentNode.style.width, 10)){
var l=parseInt(o[i_tem].parentNode.style.width, 10)-o[i_tem].text.length
for (var j_tem = 0; j_tem < l; j_tem++)
o[i_tem].innerHTML=' '+o[i_tem].innerHTML
}
}
onload=centO;
</script>
</head>
<body>
<select style="width:20ex;" name="">
<option value="">hazgngtn
<option value="">bfb
<option value="">fbbnb
<option value="">bzb
<option value="">fjkmkmhfhjm
<option value="">nbfz
</select>
</body>
</html>
Junior Coders
line up text in list/menu (drop down menu)
Posting Permissions
Reply With Quote
Bookmarks