CODEWITHSUNDEEP
htmlcss
Васил Емилов
Васил Емилов

Reputation: 99

Align text next to radio button

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

enter image description here

I want to make it like this:

enter image description here

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;
}

Upvotes: 0

Views: 8544

Answers (2)

daniel__
daniel__

Reputation: 11845

DEMO

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

Vertical-align docs

Upvotes: 4

helion3
helion3

Reputation: 37501

Try vertical-align: middle and possibly setting the line-height of text/input to equal measurements

Upvotes: 1

Related Questions