/    Sign up×
Community /Pin to ProfileBookmark

centering text in a select box

Copy linkTweet thisAlerts:
May 27.2007

I have a select box and the text goes from 15 – 35 characters. It would look much better if I could center the text in the box. I have tried everything that I can think of to center it without success. Of course I can place “nbsp;” before the text but that is unwieldy and time consuming.

Can anyone help?

Thanks!

Ben

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangMay 27.2007 — For Fx and Opera use [I]select {text-align:center;}[/I]

For IE, a JavaScript is the only solution.
Copy linkTweet thisAlerts:
@boskoMay 27.2007 — For IE, a JavaScript is the only solution.[/QUOTE]
Could you please pass an example? Thanks.
Copy linkTweet thisAlerts:
@FangMay 28.2007 — <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>center align option text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
// The centering of the text is dependent on the font-face and the filler character!
function alignOptions(sel) {
//find longest text
var aOption=sel.getElementsByTagName('option');
var longest=0;
for(var i=0; i<aOption.length; i++) {
if(aOption[i].text.length>longest){longest=aOption[i].text.length;}
}
// filler string
var filler="u2002"; // en space
for(i=0; i<longest; i=i+2) {filler+=filler;}
// 'pad' out the text
for(i=0; i<aOption.length; i++) {
var spaces=Math.round((longest - aOption[i].text.length)/2);
var fill=filler.substring(0, spaces);
if(spaces) {aOption[i].text=fill+aOption[i].text+fill;}
}
}

window.onload=function(){
// only for IE
if(!document.addEventListener){alignOptions(document.form1.select1);}
}
</script>

<style type="text/css">
body, select {font:small Verdana, Geneva, Arial, Helvetica, sans-serif;}
select {text-align:center;} /* for Fx and Opera */
</style>

</head>
<body>
<form action="#" name="form1">
<div>
<select name="select1">
<option>Home</option>
<option>Products</option>
<option>Contact-information</option>
</select>
</div>
</form>
</body>
</html>
Copy linkTweet thisAlerts:
@samanyoluMay 28.2007 — Fang,

"u2002" seems like a square on İnternet Explorer 6.

I wrote

var filler=" "; // en space

instead of


var filler="u2002"; // en space
<br/>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;center align option text&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
// The centering of the text is dependent on the font-face and the filler character!
function alignOptions(sel) {
//find longest text
var aOption=sel.getElementsByTagName('option');
var longest=0;
for(var i=0; i&lt;aOption.length; i++) {
if(aOption[i].text.length&gt;longest){longest=aOption[i].text.length;}
}
// filler string
var filler=" "; // en space
for(i=0; i&lt;longest; i=i+2) {filler+=filler;}
// 'pad' out the text
for(i=0; i&lt;aOption.length; i++) {
var spaces=Math.round((longest - aOption[i].text.length)/2);
var fill=filler.substring(0, spaces);
if(spaces) {aOption[i].text=fill+aOption[i].text+fill;}
}
}

window.onload=function(){
// only for IE
if(!document.addEventListener){alignOptions(document.form1.select1);}
}
&lt;/script&gt;

&lt;style type="text/css"&gt;
body, select {font:small Verdana, Geneva, Arial, Helvetica, sans-serif;}
select {text-align:center;} /* for Fx and Opera */
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form action="#" name="form1"&gt;
&lt;div&gt;
&lt;select name="select1"&gt;
&lt;option&gt;Home&lt;/option&gt;
&lt;option&gt;Products&lt;/option&gt;
&lt;option&gt;Contact-information&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @bmccall spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...