We would like to know how to vertical alignment between label and select field.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
label, select {<!--from w ww . j av a 2s.c o m-->
font-family: arial;
font-size: 2.0em;
vertical-align: baseline; /* default value */
}
label {
border: 1px solid gray;
width: 40%;
display: inline-block;
margin: 0;
text-align: right;
}
#state {
margin: 20px 0;
}
</style>
</head>
<body>
<div id="leftContent">
<div id="state">
<label for="state">State:</label>
<select name="state">
<option>State - Karnataka</option>
</select>
</div>
<div id="city">
<label for="city">City:</label>
<select name="city">
<option>City - Bangalore</option>
</select>
</div>
</div>
<!--leftContent-->
</body>
</html>
The code above is rendered as follows: