本文介绍了对齐单选按钮旁边的文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在单选按钮旁边的文本对齐方面存在问题。这是关于td中的单选按钮。所以我想把垂直居中的文本Hex对齐到单选按钮,但是我得到的是这样的:

我得到了一个



我想这样做:



这是我迄今为止所做的...

HTML

 < td> 
< input type =radioclass =rButton/>< span class =convText>十六进制< / span>
< / td>

CSS

  .rButton {
width:13px;
height:12px;
}
.convText {
font-family:'Segoe UI';
font-size:10px;
}


解决方案

  .rButton {
width:63px;
height:52px;
vertical-align:middle;
}
.convText {
font-family:'Segoe UI';
font-size:20px;
vertical-align:middle;
}


I have a problem with the alignment of a text next to a radio button. It's about a radio button in "td". So I want to align the text "Hex" vertically centered to the radio button, but what I get is this:

The one I got

I want to make it like this:

Here is what I've done so far...

HTML

<td>
    <input type="radio" class="rButton" /><span class="convText">Hex</span>
</td>

CSS

.rButton{
    width:13px;
    height:12px;
}
.convText{
    font-family:'Segoe UI';
    font-size:10px;
}
解决方案

DEMO

.rButton {
    width: 63px;
    height: 52px;
    vertical-align: middle;
}
.convText {
    font-family:'Segoe UI';
    font-size:20px;
    vertical-align: middle;
}

Vertical-align docs

这篇关于对齐单选按钮旁边的文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 04:40
查看更多