Horizontal layout of a checkbox with a label at the bottom
I just started writing a small page for myself without doing web design for a couple of years. As I have now found out, the table layout is not the most modern (not sure if it ever was).
Now I am trying to expand my page using CSS, but I can't find anything:
-
How to align 7 checkboxes horizontally and place the corresponding label in the center below the checkboxes?
-
How to align 2 selects horizontally and places the corresponding label in the center above the selections?
The original clean tabular code was as follows:
.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 greatly appreciated, although I prefer a simple solution as I'm just learning HTML and CSS.
source to share
I prefer a slightly different approach to the other answer, where the element is <input>
nested inside <label>
, this implicitly links the label to the input to give all sorts of nice bonuses.
It also makes it easier to keep track of markup with smaller nested containers.
<label>
<input type="checkbox">
<span class="label">Sunday</span>
</label>
And then
label {
display: inline-block;
text-align: center;
}
span.label {
display: block;
}
Note that clicking on the labels checks the corresponding checkbox. Choice behaves the same way. Since <input>
and <select>
are inline by default, this means they will be affected text-align: center
.
source to share
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;
}
Note that the checkbox is checked, so you can place it in a container and use text-align: center
Also note that I am using display: inline-block on the .checkbox-label so that they can be aligned horizontally (block elements, by default for divs, take up a whole line and omit the next element below)
I use the same principles for selection You can see everything here: http://codepen.io/Vall3y/pen/QwdWOe
source to share
Semantic purity
I'm a bit of an HTML purist, so here's an HTML form with no extra markup:
-
Legends float to the left and are vertically centered using a line height that matches the height of the legends
-
The inputs are wrapped in a label with a
display: inline-block
given width to force the text below / above the input -
The properties
fieldset:before
allow us to vertically center the labels withvertical-align: middle
Complete example
Background colors are for illustration purposes only.
* {
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>
source to share
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>
source to share