CODEWITHSUNDEEP
htmlcssforms
jaycodez
jaycodez

Reputation: 1919

How to text-align center this label text?

How do I vertically align center this text?

From:

enter image description here

To:

enter image description here

<<p>
<label></label>
<input type="checkbox" id="checkbox" name="checkbox" class="regular-checkbox big-checkbox" value="Yes" checked="checked">
<label for="checkbox" style="margin-right:10px;"></label>Subscribe me to your mailing list for upcoming events, hot offers and deals
</p>

http://jsfiddle.net/JoshSalway/E5CxM/

Upvotes: 2

Views: 21613

Answers (3)

Explosion Pills
Explosion Pills

Reputation: 191729

As counter-intuitive as it might seem, you need to add vertical-align: middle to the element you want to vertically align with, rather than the element you want to be vertically aligned (in this case, the label[for=checkbox].

See a demo here: http://jsfiddle.net/E5CxM/2/

Upvotes: 5

What have you tried
What have you tried

Reputation: 11138

Use line-height to make text vertically centered

label{
line-height: 45px;
height: 45px;
display: inline-block;
}

Here is a simple example of how it works:

http://jsfiddle.net/E5CxM/10/

Upvotes: 3

PSL
PSL

Reputation: 123739

Try this:-

http://jsfiddle.net/AFGMf/

 label
    {
        vertical-align:middle;
    }

Upvotes: 5

Related Questions