Радио / флажок выравнивания в HTML / CSS

Question

Какой самый чистый способ правильно выровнять радиокнопки / флажки с текстом? Единственное надежное решение, которое я использовал до сих пор, основано на таблицах:

<table>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 1</td>
</tr>
<tr>
    <td><input type="radio" name="opt"></td>
    <td>Option 2</td>
</tr>
</table>

Это может быть осуждается некоторыми. Я только что потратил некоторое время (снова), исследуя безбумажное решение, но потерпел неудачу. Я пробовал различные комбинации поплавков, абсолютного / относительного позиционирования и аналогичных подходов. Мало того, что они в основном молча рассчитывали на предполагаемую высоту переключателей / флажков, но и вели себя по-разному в разных браузерах. В идеале я хотел бы найти решение, которое не предполагает ничего о размерах или особых особенностях браузера. Я в порядке с использованием таблиц, но мне интересно, где есть другое решение.

Answer 1

Я думаю, что наконец-то решил проблему. Одним из обычно рекомендуемых решений является использование вертикального выравнивания: среднее:

<input type="radio" style="vertical-align: middle"> Label

Проблема, однако, состоит в том, что это все еще вызывает видимые смещения, даже если теоретически это должно работать. Спецификация CSS2 гласит:

вертикальное выравнивание: середина: Совместите вертикальную среднюю точку поля с базовой линией родительского блока плюс половину высоты родителя x.

Таким образом, он должен быть в идеальном центре (высота х - это высота символа х). Однако, проблема, кажется, вызвана тем фактом, что браузеры обычно добавляют некоторые случайные неравные поля для переключателей и флажков. Можно проверить, например, в Firefox с помощью Firebug, что поле для флажка по умолчанию в Firefox равно 3px 3px 0px 5px. Я не уверен, откуда это взялось, но другие браузеры, похоже, также имеют схожие поля. Таким образом, чтобы получить идеальное выравнивание, нужно избавиться от этих полей:

<input type="radio" style="vertical-align: middle; margin: 0px;"> Label

Еще интересно отметить, что в табличном решении поля как-то съедаются, и все хорошо выравнивается.

Answer 2

В Firefox и Opera работают следующие функции (извините, в данный момент у меня нет доступа к другим браузерам):

<div class="form-field">
    <input id="option1" type="radio" name="opt"/>
    <label for="option1">Option 1</label>
</div>

CSS:

.form-field * {
    vertical-align: middle;
}

Answer 3

Я нашел лучший и самый простой способ сделать это, потому что вам не нужно добавлять метки, div или что-либо еще.

input { vertical-align: middle; margin-top: -1px;}

Answer 4

Я бы не стал использовать таблицы для этого вообще. CSS может легко сделать это.

Я бы сделал что-то вроде этого:

   <p class="clearfix">
      <input id="option1" type="radio" name="opt" />
      <label for="option1">Option 1</label>
   </p>

p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }

Примечание: я использовал класс clearfix из: http://www.positioniseverything.net/easyclearing.html

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Answer 5

Это что-то вроде хака, но этот CSS, похоже, очень хорошо работает во всех браузерах так же, как и при использовании таблиц (кроме chrome)

input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
 input[type=radio] { margin-top: -2px; }
}

Убедитесь, что вы используете этикетки с радиоприемниками, чтобы они работали. т.е.

<option> <label>My Radio</label>

Answer 6

Если ваша метка длинная и идет в несколько рядов, задайте ширину и отображение: поможет встроенный блок.

.form-field * {
  vertical-align: middle;
}
.form-field input {
  clear:left;
}
.form-field label { 
  width:200px;
  display:inline-block;
}

<div class="form-field">
    <input id="option1" type="radio" name="opt" value="1"/>
    <label for="option1">Option 1 is very long and is likely to go on two lines.</label>
    <input id="option2" type="radio" name="opt" value="2"/>
    <label for="option2">Option 2 might fit into one line.</label>
</div>

Answer 7

Следующий код должен работать:)

С уважением,

---

<style type="text/css">
input[type=checkbox] {
    margin-bottom: 4px;
    vertical-align: middle;
}

label {
    vertical-align: middle;
}
</style>


<input id="checkBox1" type="checkbox" /><label for="checkBox1">Show assets</label><br />
<input id="checkBox2" type="checkbox" /><label for="checkBox2">Show detectors</label><br />

Answer 8

Я обнаружил, что лучшим решением для этого было задать для ввода высоту, соответствующую метке. По крайней мере, это исправило мою проблему с несоответствиями в Firefox и IE.

input { height: 18px; margin: 0; float: left; }
label { height: 18px; float: left; }

<li>
  <input id="option1" type="radio" name="opt" />
  <label for="option1">Option 1</label>
</li>

Answer 9

@ sfjedi

Я создал класс и присвоил ему значения CSS.

.radioA{
   vertical-align: middle;
}

Это работает, и вы можете проверить это по ссылке ниже. http://jsfiddle.net/gNVsC/ Надеюсь, это было полезно.

Answer 10

Ниже я буду вставлять флажок динамически. Стиль включен, чтобы выровнять флажок и самое важное, чтобы убедиться, что перенос слов является прямым. самая важная вещь здесь - это отображение: table-cell; для выравнивания

Визуальный базовый код.

'код для динамической вставки флажка

Dim tbl As Table = New Table()
Dim tc1 As TableCell = New TableCell()
tc1.CssClass = "tdCheckTablecell"

'get the data for this checkbox
Dim ds As DataSet
Dim Company As ina.VullenCheckbox
Company = New ina.VullenCheckbox
Company.IDVeldenperScherm = HETid
Company.IDLoginBedrijf = HttpContext.Current.Session("welkbedrijf")
ds = Company.GetsDataVullenCheckbox("K_GetS_VullenCheckboxMasterDDLOmschrijvingVC") 'ds6

'создать флажок

Dim radio As CheckBoxList = New CheckBoxList
radio.DataSource = ds
radio.ID = HETid
radio.CssClass = "tdCheck"
radio.DataTextField = "OmschrijvingVC"
radio.DataValueField = "IDVullenCheckbox"
radio.Attributes.Add("onclick", "documentChanged();")
radio.DataBind()

'подключить флажок

tc1.Controls.Add(radio)
tr.Cells.Add(tc1)
tbl.Rows.Add(tr)

'стиль для флажка

input[type="checkbox"] {float: left;   width: 5%; height:20px; border: 1px solid black; }

.tdCheck label {     width: 90%;display: table-cell;    align:right;}

.tdCheck {width:100%;}

и вывод HTML

<head id="HEAD1">
    <title>
        name
    </title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /><meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" />
</head>
<style type='text/css'>
input[type="checkbox"] {float: left;   width: 20px; height:20px;  }
.tdCheck label {     width: 90%;display: table-cell;    align:right;}
.tdCheck {width:100%;}
.tdLabel {width:100px;}
.tdCheckTableCell {width:400px;}
TABLE
{

vertical-align:top;
border:1;border-style:solid;margin:0;padding:0;border-spacing:0;
border-color:red;
}
TD
{
vertical-align:top; /*labels ed en de items in het datagrid*/
border: 1;  border-style:solid;
border-color:green;
    font-size:30px  }
</style>
<body id="bodyInternet"  > 
    <form name="Form2" method="post" action="main.aspx?B" id="Form2">
        <table border="0">
            <tr>
                <td class="tdLabel">
                    <span id="ctl16_ID{A}" class="DynamicLabel">
                        TITLE
                    </span>
                </td>
                <td class="tdCheckTablecell">
                    <table id="ctl16_{A}" class="tdCheck" onclick="documentChanged();" border="0">
                        <tr>
                            <td>
                                <input id="ctl16_{A}_0" type="checkbox" name="ctl16${A}$0" />
                                <label for="ctl16_{A}_0">
                                    this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp  
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_1" type="checkbox" name="ctl16${A}$1" />
                                <label for="ctl16_{A}_1">
                                    ITEM2
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}$2" />
                                <label for="ctl16_{A}_2">
                                    ITEM3
                                </label>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
</form>
</body>