Question

我有一个单选按钮，应该引用4个图像，所以我只是在图像旁边放一个空值的单选按钮，但是当我这样做时，单选按钮几乎低于图像的底部。我想提高它，使它处于图像高度的中间位置。这是我的HTML：

<input type="radio" name="computer" value="">
<img class="extra-margin-human" width="50px" height="50px" src="images/other/human.jpg"/>
<img class="extra-margin-computer" width="50px" height="50px" src="images/other/computer.jpg"/>
<img class="extra-margin-computer" width="50px" height="50px" src="images/other/computer.jpg"/>
<img class="extra-margin-computer" width="50px" height="50px" src="images/other/computer.jpg"/>

如何让单选按钮升高？

Answer 1

将vertical-align:middle;应用于您的元素。

Demo

Answer 2

添加位置：相对于您的单选按钮并使用其顶部属性

进行定位

以下是解决方案DEMO

<input type="radio" name="computer" value="" style='position:relative; top:-20px'>
<img class="extra-margin-human" width="50px" height="50px" src="images/other/human.jpg"/>
<img class="extra-margin-computer" width="50px" height="50px" src="images/other/computer.jpg"/>
<img class="extra-margin-computer" width="50px" height="50px" src="images/other/computer.jpg"/>
<img class="extra-margin-computer" width="50px" height="50px" src="images/other/computer.jpg"/>

Answer 3

您可以使用div或ids。

<input type="radio" name="computer" value="" id="blaaah blahh blaagh">

然后进入CSS并做。

#blaah blahh blaagh{
position:absolute;
top-5px;
}

（这假设它已经在div中，你可以position:relative来修复它，但是它会干扰网页上的其他元素。）

下面的答案对你来说可能会更好。

HTML / CSS - 如何提高单选按钮？

3 个答案: