Question

这是一个基本的CSS问题，我有一个带有小文本标签的单选按钮。我希望文本显示为垂直居中，但在我的情况下，文本始终与单选按钮的按钮对齐。

<p><input type="radio" id="opt1" name="opt1" value="1" />A label</p>

这是一个Jsfiddle：

http://jsfiddle.net/UnA6j/

有什么建议吗？

谢谢，

艾伦。

Answer 1

在label内使用它。使用vertical-align将其设置为各种值 - bottom，baseline，middle等。

http://jsfiddle.net/UnA6j/5/

Answer 2

我认为这是你可能会要求的

http://jsbin.com/ixowuw/2/

CSS

label{
  font-size:18px;
  vertical-align: middle;
}

input[type="radio"]{
  vertical-align: middle;
}

HTML

<span>
  <input type="radio" id="oddsPref" name="oddsPref" value="decimal" />
  <label>Decimal</label>
</span>

Answer 3

习惯了这个

    input[type="radio"]{
    vertical-align:top;
    }
p{
    font-size:10px;line-height: 18px;
}

<强> Demo

Answer 4

HTML：

<label><input type="radio" id="opt1" name="opt1" value="1"> A label</label>

CSS：

label input[type="radio"] { vertical-align: text-bottom; }

Answer 5

这将导致对齐

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "offlineCell")
    let mainImageView = cell?.viewWithTag(2) as! UIImageView
    let mainImageURL = offlineImages[indexPath.row]
    let mainImageData = NSData(contentsOf: mainImageURL)
    let mainImage = UIImage(data: mainImageData! as Data)
    mainImageView.image = mainImage
    return cell!
}

Answer 6

您可以尝试类似的事情;

<p><input type="radio" id="oddsPref" name="oddsPref" value="decimal" /><span>Decimal</span></p>

并给予跨度最大的余量;

span{
    margin-top: 4px;
    position:absolute;
}

这里是小提琴http://jsfiddle.net/UnA6j/11/

Answer 7

您需要使用float：left

将文本对齐单选按钮的左侧

input[type="radio"]{
float:left;
}

您也可以使用标签来提高响应速度。

Answer 8

简单和简短的解决方案添加以下样式：

style="vertical-align: text-bottom;"

Answer 9

你也可以尝试这样的事情：

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

  <label  class="child"><input id = "warm" type="radio" name="weathertype" value="warm" checked> Warm<br></label>
<label class="child1"><input id = "cold" type="radio" name="weathertype" value="cold" checked> Cold<br></label>

Answer 10

input.radio {vertical-align:middle; margin-top:8px; margin-bottom:12px;}

SIMPLY根据需要调整顶部和底部以完美对齐单选按钮或复选框

<input type="radio" class="radio">

垂直对齐单选按钮旁边的文本

10 个答案: