CODEWITHSUNDEEP
javascriptcssradio-button
Hoser
Hoser

Reputation: 5044

Fixing off-center radio text

enter image description here

I'm trying to make a survey webapp on heroku (javascript mostly) and the off-center text on these radio buttons is rather annoying. What's an easy way to center it and slide it off to the side a little? Formatting is all done with CSS right now. Currently how I'm formatting these radio inputs is as so....

.radio-input{
    background: #D4E7ED;
    padding:20px 10px;
}

Upvotes: 0

Views: 100

Answers (2)

ewilan
ewilan

Reputation: 716

Here's an example I created using a similar approach that Coder outlined. It includes the background coloring you specified and it wraps the radio button and text in divs. It seemed to behave pretty well for me:

the css: 

.radio-input {
    padding-top:20px;
    vertical-align:top;
}
.radio-input-text {
    vertical-align:bottom;
}
.background {
    background: #D4E7ED;
    width:300px;
}

the HTML:

<div class="background">
    <div class="radio-input">
        <input type="radio" value="Great" id="Great" /><span class="radio-input-text">Great</span>
    </div>
    <div class="radio-input">
        <input type="radio" value="Okay" id="Okay" /><span class="radio-input">Okay</span>
    </div>
    <div class="radio-input">
        <input type="radio" value="Very Bad" id="VeryBad" /><span class="radio-input">Very Bad</span>
    </div>
</div>

Demo

Upvotes: 1

Software Engineer
Software Engineer

Reputation: 3956

You can use vertical-align: middle on label and radio button with padding-top: 1% on label for aligning text and radio button:

label {
    vertical-align: middle;
    padding-top: 1%;
}
.rdo{
    vertical-align:middle;
}

DEMO

Upvotes: 1

Related Questions