Вирівнювання радіо / прапорця в 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>

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

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

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

Проблема, однак, полягає в тому, що це все ще призводить до видимих ​​розбіжностей, хоча теоретично це має спрацювати. Специфікація CSS2 говорить, що:

вертикальне вирівнювання: середнє: Вирівняйте вертикальну середню точку поля з базовою лінією батьківського поля плюс половину висоти x батьківської.

Отже, воно повинно бути в ідеальному центрі (висота x - це висота символу 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">
введення [type = прапорець] {
    поле внизу: 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/ Сподіваюся, це було корисно.