How To Center a Dropdown Select Box - JScript

jed · Nov 9, 2012

Hey all... Having some issues trying to figure out how to "center" my select boxes into the middle of the page. I tried <align="middle"> underneath the last <option value> but that didn't do anything.

Here's what the page looks like. http://www.uni.edu/jbledsoe/jerseys.html I want the "Size" and "Quantity" drop boxes underneath the center of each jersey image... This is for a school project and I didn't get to ask the prof. cause he was helping others all class.

Here's the script I have so far:

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="JORDAN">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Semester Project</title>
</head>

<body>
<form name="Jerseys">
<h1>Clay Matthews - $150.00</h1>
<p><img src="images/CMATT.jpg" alt="clay">
<img style="float:middle"></p>
<br>
<select name="MatthewsSize">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
<br>

<select name="MatthewsQuantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>

<h2>Randall Cobb - $150.00</h2>
<p><img src="images/RCOBB.jpg" alt="cobb" align="middle">
<img style="float:middle"></p>
<br>
<select name="CobbSize">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
<br>

<select name="CobbQuantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br>

<h3>Charles Woodson - $150.00</h3>
<p><img src="images/CWOOD.jpg" alt="charles" align="middle">
<img style="float:middle"></p>
<br>
<select name="WoodsonSize">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
<br>

<select name="WoodsonQuantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br><br><br>

<input type="text" name="Total">

<input type="button" value="Total" onClick='var jersey1;
var total;
jersey1 = eval

(document.Jerseys.MatthewsQuantity.value);
total = jersey1 * 150.00;

jersey2 = eval

(document.Jerseys.CobbQuantity.value);
total = jersey2 * 150.00 +

total;

jersey3 = eval

(document.Jerseys.WoodsonQuantity.value);
total = jersey3 * 150.00 +

total;
document.Jerseys.Total.value =

total;'>
<input type="button" value="Reset"
onClick='document.Jerseys.MatthewsQuantity.value = "0";
document.Jerseys.WoodsonQuantity.value = "0";
document.Jerseys.CobbQuantity.value = "0"
document.Jerseys.MatthewsSize.value = "Small"
document.Jerseys.WoodsonSize.value = "Small"
document.Jerseys.CobbSize.value = "Small"
document.Jerseys.Total.value = "0"'>

</form>
</body>
</html>

Thanks for any help!

Ross211 · Nov 12, 2012

Wrap a div with align="center" around your select elements like this -

Code:

<div align="center">
<select>
......
</select>
</div>

You could also do this -

Code:

<div style="text-align:center">
<select>
......
</select>
</div>

There are many ways to do this but these 2 solutions will work

/edit

Forgot to share the fiddle I made -

http://jsfiddle.net/FKYnx/

System Name	REAPER
Processor	AMD FX-8350 x8 @ 4.64 GHz (20x232, 1.4625v)
Motherboard	Gigabyte GA-990FXA-UD3
Cooling	Corsair Liquid H60. 2 front in, 1 side in, 1 rear out (H60), 1 top out.
Memory	G.Skill Sniper 2x4 GB DDR3 1333 @ 1546
Video Card(s)	Sapphire HD 7950 3GB @ 1095/1395
Storage	Crucial M500 240 GB SSD and Western Digital Green 1TB 7200 RPM
Display(s)	Acer H223H 22.5"
Case	Antec 300 Black Steel
Audio Device(s)	N/A
Power Supply	Corsair CX-600 Watt 80 Bronze
Mouse	Corsair Sabre RGB Optical
Keyboard	Logitech G610 Mechanical
Software	Windows 10 Pro x64
Benchmark Scores	3dMark 2011 - 8965 15210 3dMark06 (old system)

System Name	Late 2013 rMBP 13'' w/ 250 GB SSD
Display(s)	Dell P2416D @ 2560x1440 & Dell U2211H @ 1920x1080
Audio Device(s)	NuForce uDAC-2 w/ Klipsch Promedia 2.1 & Sennheiser HD595
Mouse	Logitech G400 @ 1600 DPI
Keyboard	Razr Black Widow
Software	OS X

How To Center a Dropdown Select Box - JScript

jed

Ross211