中心垂直radiobutton和它的標簽

Question

我有這樣的代碼：

<form method="post" id="sc_form">        
     <div class="radio-group">     
          <input type="radio" name="phone" id="send" value="send"></input>
          <label for="send">Вы отправитель</label>
     </div>
     <div class="radio-group">
          <input type="radio" name="phone" id="get" value="get"></input>
          <label for="get">Вы получатель</label>
     </div>  
     <input type="submit" name="send" value="Отправить" id="send-button" />
</form>

CSS：

#get, #send{
  border: none;
  width: auto;
  height: auto;
  display: inline;
}

.radio-group{
  text-align: left;
  margin: 0 10px 6px 10px;
  font-family: Arial,Helvetica,Garuda,sans-serif;
  font-size: 11px;
}

input[type='radio'], label{   
    vertical-align: baseline;
}

我想在同一條線上設置收音機和標簽，這樣它們看起來很漂亮，並且垂直居中。

http://jsfiddle.net/Zn93w/

整頁和CSS： http ： //jsfiddle.net/2yZTK/

Answer 1

這項工作對我來說

input[type='radio']{
    margin:0;
}

input[type='radio'], label{   
   display:inline;
   vertical-align:top;
}

Удачи）

Answer 2

像這樣？ http://jsfiddle.net/Driveash/Zn93w/1/

我在.radio-group類中添加了行高，並通過輸入和標簽更改了垂直對齊。

.radio-group{
  text-align: left;
  margin: 0 10px 6px 10px;
  font-family: Arial,Helvetica,Garuda,sans-serif;
  font-size: 11px;
  line-height:11px;
}

input[type='radio'], label{   
    vertical-align: bottom;
    margin: 0; //for the whole site.
}