I've been trying to align my "field labels" in the center of their respective text fields without much success so far. To achieve this, I resorted to using tables but that didn't quite do the trick. Currently, I'm experimenting with CSS properties like "display: inline-block;" and "vertical-align: middle;", yet to no avail.
Take a look at the image here
Below is the HTML code snippet I'm working on:
<!DOCTYPE html>
<html>
<head>
<title>DNA Translator</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<script></script>
</head>
<body>
<div>
<form>
<table valign="center" id="table1">
<tr>
<td class="labels">DNA:</td>
<td class="spacer"></td>
<td><input type="text" name="dna" placeholder="DNA"></td>
</tr>
<tr>
<td class="labels">mRNA:</td>
<td class="spacer"></td>
<td><input type="text" name="mrna" placeholder="mRNA"></td>
</tr>
<tr>
<td class="labels">tRNA:</td>
<td class="spacer"></td>
<td><input type="text" name="trna" placeholder="tRNA"></td>
</tr>
<tr>
<td class="labels">Amino Acids:</td>
<td class="spacer"></td>
<td><input type="text" name="aminoAcids" placeholder="Amino Acids"></td>
</tr>
<tr>
<td></td>
<td class="spacer"></td>
<td class="button"><button id="button_translate" type="button">Translate</button>
<button id="button_clear" type="button">Clear</button></td>
</tr>
</table>
<!--<div id="text">
<p>DNA: </p><input type="text" name="dna" placeholder="DNA"><br>
<p>mRNA: </p><input type="text" name="mrna" placeholder="mRNA"><br>
<p>tRNA: </p><input type="text" name="trna" placeholder="tRNA"><br>
<p>Amino Acids: </p><input type="text" name="aminoAcids" placeholder="Amino Acids"><br>
</div>
<div>
<button id="button_translate" type="button">Translate</button>
<button id="button_clear" type="button">Clear</button>
</div>-->
</form>
</div>
</body>
</html>
Here's the excerpt from my attempt at styling it using CSS:
div.container {
width:98%;
margin:1%;
}
table#table1 {
margin-left:auto;
margin-right:auto;
/*width:530px;*/
}
td {
height:20px;
}
td.button {
height:40px;
}
td.labels {
width:89px;
display: inline-block;
text-align:right;
vertical-align: middle;
}
td.spacer {
width:15px;
}
#button_translate
{
opacity: 0.7;
display: inline-block;
height:35px;
width:200px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 15px auto;
}
#button_clear
{
opacity: 0.7;
display: inline-block;
height:35px;
width:200px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 15px auto;
}
input[type="text"]
{
width: 390px;
display:inline-block;
vertical-align:middle;
height:20px;
padding:4px 6px;
margin-bottom:20px;
font-size:14px;
line-height:20px;
color:#555;
vertical-align:middle;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
background-color:#fff;
border:1px solid #ccc;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s
}
#text
{
width: 450px ;
margin-top; 800px;
margin-left: auto ;
margin-right: auto ;
}