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

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

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

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] {
    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 Флажок:

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

ниже я буду вставлять флажок динамически. Стиль включен, чтобы выровнять флажок и самое главное, чтобы убедиться, что перенос слов является прямым. самое главное здесь отображение: таблица-ячейка; для выравнивания

код visual basic.

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

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}" />
                                <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}" />
                                <label for="ctl16_{A}_1">
                                    ITEM2
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}" />
                                <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/ Надеюсь, это было полезно.

input[type="radio"], input[type="checkbox"] {
    vertical-align: middle;
    margin-top: -1;
}