如何使单选按钮位于标签内并在它们旁边居中文本？

Question

fiddle

* {
    font-family:sans-serif;
}
#quote_form table {
    border-collapse: collapse;
}
#quote_form td, #quote_form th {
    padding: 0;
    margin: 0;
}
#quote_form fieldset>label {
    display: block;
    font-weight: bold;
    margin-top: 7px;
}

#quote_form input {
    height: 16px;
    padding: 2px;
}
#quote_form select {
    height: 22px;
    padding: 2px;
}

#quote_form td>label {
    font-size: .9em;
}
#quote_form td {
    padding-right: 3px;
}
#quote_form td>input {
    width: 200px;
}
#quote_form .required {
    color: red;
}
#quote_form input {
    font-family: sans-serif;
}
#quote_form fieldset>input {
    width: 500px;
}
#quote_form fieldset>select {
    width:  504px;
}
#quote_form fieldset {
    border: 1px solid silver;
    padding: 10px;
}
#quote_form legend {
    margin-left: 15px;
    padding: 2px;
    font-weight: bold;
}
#quote_form .calendar {
    width: 80px;
}
#quote_form .datetime td {
    padding: 0;
}
#quote_form .datetime .date {
    padding-right: 4px;
}
#quote_form .datetime .hour {
    font-weight:bold;
}
#quote_form .datetime .minute {
    padding-right: 4px;
}
#quote_form .datetime .ampm input {
    margin: 0 2px 0 0;
}
#quote_form .datetime .ampm label {
    text-align: baseline;
    margin-right: 2px;
    background-color: #eeeeee;
    border-radius: 4px;
}

<form id="quote_form">
    <table class="datetime">
        <tbody>
            <tr>
                <td class="date"><input type="text" class="calendar"></td>
                <td class="hour"><select></select>:</td>
                <td class="minute"><select></select></td>
                <td class="ampm">
                    <label><input type="radio" name="pickup_ampm">AM</label>
                    <label><input type="radio" name="pickup_ampm">PM</label>
                </td>
            </tr>
            <tr>
                <td><label>Date</label></td>
                <td><label>HH</label></td>
                <td><label>MM</label></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</form>

单选按钮从灰色标签中伸出。我希望它们坐得更低一点，以便它们位于标签文本旁边的中心。我尝试了负边距——没有用。

Answer 1

我这里用的是windows8，效果很好。

随便试试这个方法。

label > input[type="radio"]
{
    position: relative; // Don't forgot this line
    top: -5px; // Change this value to set exact place.
}

另一种自动方式是

label > input[type="radio"]
{
    position: relative;
    vertical-align: middle;
}

Answer 2

如果我理解正确的话，这应该是你想要的。

.ampm label{
    display:block;
    float: left;
    padding:2px 4px;
}