Dropdown list alignment

HTML & CSS
1

How can i align my dropdown list? I tried vertical-align:middle; but it doesn’t work

2

Hi,

You will need to give us more to work with than that I;m afraid :slight_smile: Please read the forum posting basics in order for you to get the best help.

Vertical-align doesn’t apply to block elements so would be of no use unless you have either table cells or inline-block structures which is unlikely. We need full css, html or a link in order to offer assistance:)

3

Hi,

pardis asks about this: http://jsfiddle.net/8Observer8/PAcW8/

Please, help her :slight_smile:

4

Hi,

I wouldn’t usually use a table for this and use fieldsets and legends instead of headings but using your basic table structure it would be something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
table.form1 {
	border:none;
	margin:auto;
}
.form1 td {
	border:1px solid #000;
	padding:10px;
	vertical-align:top;
}
.form1 input { margin:0 10px 5px 0 }
.label1 {
	display:inline-block;
	width:100px;
	vertical-align:middle
}
.form1 h3 { margin:0 0 10px }
.age h3 {
	display:inline-block;
	vertical-align:middle;
 *display:inline;/* ie6/7 hack*/
	zoom:1.0;
	width:100px;
}
.form1 textarea { width:250px }
</style>
</head>

<body>
<form action="">
		<table class="form1">
				<tr>
						<td><label class="label1" for="first-name">First name:</label>
								<input type="text" name="first-name" id="first-name">
								<br>
								<label class="label1" for="last-name">Last name:</label>
								<input type="text" name="last name" id="last-name"></td>
						<td><h3>Your gender:</h3>
								<input type="radio" name="sex" value="male" id="male">
								<label for="male"> male</label>
								<br>
								<input type="radio" name="sex" value="female" id="female">
								<label for="female"> female</label></td>
				</tr>
				<tr>
						<td class="age"><h3>Your age:</h3>
								<select name="age">
										<option value="12.5">10-15</option>
										<option value="17.5">15-20</option>
										<option value="22.5">20-25</option>
										<option value="29.5">25-30</option>
								</select></td>
						<td><textarea rows="5" cols="10" >Leave your comments here.</textarea></td>
				</tr>
		</table>
</form>
</body>
</html>

Hope that helps.

5

Thank you very much :smiley:

6