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

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

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

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

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

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

vertical-align: middle: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

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

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

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

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

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

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

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

Если ваша метка длинная и состоит из нескольких строк, установите ширину и отображение: 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>

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

С уважением,

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

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

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/ Надеюсь, это было полезно.