Horizontal checkbox layout with label underneath - html

Question

I just started coding a small page for myself after not doing any web design for a couple of years. As I now learned, laying out the page with tables is not state-of-the-art anymore (not sure if it ever really was).
Now I am trying to layout my page with CSS but couldn't find anything on:
How to align 7 checkboxes horizontally and put the corresponding label centered below the checkboxes?
How to align 2 selects horizontally and put the corresponding label centered above the selects?
The initial pure table-code was the following:
.form fieldset {
display: table;
border: 1px solid #c6c7cc;
border-radius: 5px;
}
.form label {
display: table-cell;
text-align: right;
padding: 5px;
}
.form input,
.form select {
display: table-cell;
}
.form .cssRow {
display: table-row;
}
.form .submit {
display: table-cell;
caption-side: bottom;
display: table-caption;
text-align: center;
}
<table>
<tr>
<td align="right">Name</td>
<td align="left">
<input name="name" type="text">
</td>
</tr>
<tr>
<td align="right">Day(s) of week</td>
<td align="center">
<table>
<tr>
<td align="center">
<input type="checkbox" name="day[]" value="mo" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="tu" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="we" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="th" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="fr" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="sa" checked>
</td>
<td align="center">
<input type="checkbox" name="day[]" value="su" checked>
</td>
</tr>
<tr>
<td align="center">Mo</td>
<td align="center">Tu</td>
<td align="center">We</td>
<td align="center">Th</td>
<td align="center">Fr</td>
<td align="center">Sa</td>
<td align="center">Su</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right">Validity</td>
<td align="center">
<table>
<tr>
<td>Valid from</td>
<td>Valid to</td>
</tr>
<tr>
<td>
<select>
<option>January</option>
<option>February</option>
</select>
</td>
<td>
<select>
<option>January</option>
<option>February</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="submit" value="Refresh">
</td>
</tr>
</table>
My CSS attempt so far looks like this:
<div class="form">
<fieldset>
<legend>Search</legend>
<div class="cssRow">
<label for="name">Name</label>
<input name="name" type="text" size="30" maxlength="30">
</div>
<div class="cssRow">
<label for="day[]">Day(s) of week</label>
<input name="day[]" type="text" value="ToDo" size="30" disabled>
</div>
<div class="cssRow">
<label>Validity</label>
<input type="text" value="ToDo" size="30" disabled>
</div>
<div class="submit">
<input type="submit" name="submit" value="Suchen">
</div>
</fieldset>
</div>
To illustrate my problem, I created the following JSFiddle: http://jsfiddle.net/c9a7ezyk/
Any suggestions are welcome, although I prefer a simple solution, as I am just (re)learning HTML and CSS.

Answer 1

I prefer a slightly different approach to the other answer, where the <input> element is nested inside of a <label>, this implicitly associates the label with the input to give all kinds of nice bonuses.
It also makes for a simpler to follow markup, with less nested containers.
Example
<label>
<input type="checkbox">
<span class="label">Sunday</span>
</label>
And then
label {
display: inline-block;
text-align: center;
}
span.label {
display: block;
}
Notice how clicking the labels check the associated checkbox properly. Selects behave exactly the same way. Because <input> and <select> are inlines by default, it means that they'll be affected by text-align: center.

Answer 2

Checkbox with label:
<div class="checkbox-label">
<label for="checkbox">Sunday</label>
<div class="checkbox-container">
<input name="checkbox" type="checkbox">
</div>
</div>
.checkbox-label {
display: inline-block
}
.checkbox-container {
text-align: center;
}
Notice that the checkbox is inline so you can put it in a container and use text-align: center
Also notice that I use display: inline-block on .checkbox-label so that they can be aligned horizontally (block elements, default for div, takes up a whole line and drops the following element beneath it)
I use the same principals for the selects
You can see the whole thing here:
http://codepen.io/Vall3y/pen/QwdWOe

Answer 3

Semantic Purity
I am a bit of an HTML purist, so here is an HTML form without any extra markup:
The legends are floated to the left and vertically centered using a line-height that matches the legends height
The inputs are wrapped in a label with display: inline-block which is given a width to force the text below / above the input
The fieldset:before properties allow us to vertically center the labels with vertical-align: middle
Full Example
The background colours are just to illustrate the layout.
* {
margin: 0;
padding: 0;
}
fieldset {
border: none;
height: 70px;
}
fieldset:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
background: #F90;
width: 0;
}
legend {
height: 100%;
line-height: 70px;
width: 150px;
text-align: center;
background: #F90;
float: left;
}
input[type=checkbox] {
margin: 0 5px;
}
.days label {
background: #F90;
width: 30px;
display: inline-block;
vertical-align: middle;
text-align: center;
}
.validity label {
background: #F90;
width: 100px;
display: inline-block;
vertical-align: middle;
text-align: center;
}
<form>
<fieldset class="days">
<legend>Day(s) of Week</legend>
<label for="monday">
<input type="checkbox" id="monday" />Mo
</label>
<label for="tuesday">
<input type="checkbox" id="tuesday" />Tu
</label>
<label for="wednesday">
<input type="checkbox" id="wednesday" />We
</label>
<label for="thursday">
<input type="checkbox" id="thursday" />Th
</label>
<label for="friday">
<input type="checkbox" id="friday" />Fr
</label>
<label for="saturday">
<input type="checkbox" id="saturday" />Sa
</label>
<label for="sunday">
<input type="checkbox" id="sunday" />Su
</label>
</fieldset>
<fieldset class="validity">
<legend>Validity</legend>
<label for="from">Valid From
<select id="from">
<option>Option</option>
</select>
</label>
<label for="to">Valid to
<select id="to">
<option>Option</option>
</select>
</label>
</fieldset>
</form>

Answer 4

Demo here
Here is the code:
<html>
<body>
<div>Name <input type="text"></input></div><br>
<div>Day(s) of week</div>
<div style="margin-left: 120px;margin-top: -25px;">
<div><input type="checkbox" checked><br>Mo</input></div>
<div style="
width: 10px;
margin-left: 30px;
margin-top: -37px;">
<input type="checkbox" checked><br>Tu</input></div>
<div style="
width: 10px;
margin-left: 60px;
margin-top: -37px;">
<input type="checkbox" checked><br>We</input></div>
<div style="
width: 10px;
margin-left: 90px;
margin-top: -37px;">
<input type="checkbox" checked><br>Th</input></div>
<div style="
width: 10px;
margin-left: 120px;
margin-top: -37px;">
<input type="checkbox" checked><br>Fr</input></div>
<div style="
width: 10px;
margin-left: 150px;
margin-top: -37px;">
<input type="checkbox" checked><br>Sa</input></div>
<div style="
width: 10px;
margin-left: 180px;
margin-top: -37px;"><input type="checkbox" checked><br>Su</input>
</div>
</div>
<br>
<div>Validity
<select>
<option>January</option>
<option>February</option>
</select>
<select>
<option>January</option>
<option>February</option>
</select>
</div>
</body>
</html>