Выравнивание радио / флажка в HTML / CSS

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

<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>

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

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

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

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

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

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

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

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

Следующее работает в 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;
}

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

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

Я бы вообще не стал использовать для этого таблицы. 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 */

Это немного похоже на взлом, но этот 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>

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

.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>

Я обнаружил, что лучшим решением для этого было присвоить входу высоту, соответствующую метке. По крайней мере, это устранило мою проблему с несоответствиями в 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>

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

С Уважением,

<style type = "text / css">
input [type = checkbox] {
    нижнее поле: 4 пикселя;
    вертикальное выравнивание: средний;
}

метка {
    вертикальное выравнивание: средний;
}
</style>


<input id = "checkBox1" type = "checkbox" /> <label for = "checkBox1"> Показать ресурсы </label> <br />
<input id = "checkBox2" type = "checkbox" /> <label for = "checkBox2"> Показать детекторы </label> <br />

Это простое решение, которое решило проблему для меня:

label 
{

/* for firefox */
vertical-align:middle; 

/*for internet explorer */
*bottom:3px;
*position:relative; 

padding-bottom:7px; 

}

Реализовать это можно несколькими способами:

1. Для стандартного флажка ASP.NET:

   .tdInputCheckBox
   { 
   position:relative;
   top:-2px;
   }
   <table>
           <tr>
               <td class="tdInputCheckBox">                  
                   <asp:CheckBox ID="chkMale" runat="server" Text="Male" />
                   <asp:CheckBox ID="chkFemale" runat="server" Text="Female" />
               </td>
           </tr>
   </table>
   

2. Для DevExpress CheckBox:

   <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/>
   <dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>
   

3. Для RadioButtonList:

   <asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
      <asp:ListItem>Yes</asp:ListItem>
      <asp:ListItem>No</asp:ListItem>
   </asp:RadioButtonList>
   

4. Для обязательных валидаторов полей:

   <asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
   <asp:RequiredFieldValidator ID="reqEmailId" runat="server" ErrorMessage="Email id is required." Display="Dynamic" ControlToValidate="txtEmailId"></asp:RequiredFieldValidator>
   <asp:RegularExpressionValidator ID="regexEmailId" runat="server" ErrorMessage="Invalid Email Id." ControlToValidate="txtEmailId" Text="*"></asp:RegularExpressionValidator>`
   

Ниже я динамически установлю флажок. Стиль включен для выравнивания флажка и, что наиболее важно, для обеспечения прямого переноса слов. здесь самое главное display: 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>

@sfjedi

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

.radioA{
   vertical-align: middle;
}

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