Выровнять флажок под этикеткой?

Question

У меня есть следующий HTML-код для флажка:

<td class="myClass"> 
    select<br><input type="checkbox" id="one" name="delete" value="one"> 
</td> 

его выход, как показано ниже:

, но я хочу флажок, который будет отображаться именно под наклейку, как так :

 select 
     [] 

Как я могу это сделать?

Answer 1

Просто добавьте стиль text-align:center; и display:block; в контейнер.

Хороший совет: (возможно, вы это знаете) Если контейнер этикетки и флажок wll будет <label>, входное событие совместного доступа с контейнером. Для нелогич-:

<table> 
    <tr> 
    <td class="myClass"> 
     <label> 
     Click me, to change Checkbox value !<br> 
     <input type="checkbox" id="one" name="delete" value="one" align=""> 
     </label> 
    </td> 
    </tr> 
</table> 

проверить его http://jsfiddle.net/G7JxA/

Answer 2

Добавить тег span вокруг текста, затем назначить ширину и text-align:center как span, так и input.

HTML

<table> 
<tr> 
    <td class="myClass"> 
     <span>select<span> 
     <input type="checkbox" id="one" name="delete" value="one"/> 
     </td> 
</tr> 
</table> 

CSS

.myClass{ 
    width: 40px; 
    display:block; 
    text-align: center; 
} 

Рабочий примерhttp://jsfiddle.net/GSRGX/

Answer 3

DEMO

Пожалуйста, проверьте выше demo.

.myClass дает text-align:center;

<table> 
    <tr> 
<td class="myClass"> 
    select<br><input type="checkbox" id="one" name="delete" value="one" align=""> 
</td> 
    </tr> 
</table> 

Answer 4

Если установить позицию по отношению к вашему флажком, вы можете переместить его вокруг с левой :, правый :, верхний :, внизу :.

HTML-код будет выглядеть следующим образом:

<td class="myClass"> 
    select 
    <br/> 
    <input type="checkbox" id="one" name="delete" value="one" /> 
</td> 

И в CSS:

#one { 
position:relative; 
left:12px; 
} 

Я сделал JSFiddle demo.