How do I center a label in a div ?

Question

Hi,

I have a div with a height of 30px

I want to add plain text to this div, but the question is - how can I make the plain text appear on the center of my div ?

i.e, the text will be shown 15px under the top of the div.

I tried a label with margin-top:15; but it didnt work

Any suggestions ? thanks!

Answer 1

Use padding-top instead of margin-top. Remember that adding padding to the top is added to the height, so you need to reduce the amount that you use for padding from the height. If you just always want for the text to have 15px on top and bottom of it, just simply do:

padding: 15px 0px;

Without specifying height at all.

Answer 2

padding-top: 15px;

remove 15px from the height on the div to.

you should have a look at padding http://www.w3schools.com/css/css%5Fpadding.asp

Answer 3

You can:

<div style="height:30px;line-height:30px;text-align:center;">
  Label
</div>

Set the line-height of the text helps you to fit the height for one line only.

Answer 4

height: 30px; line-height: 30px; padding: 0;

Answer 5

Hi if you want anything to be in center of it's parent, just give the parent specific width using style and give the child style="margin:0 auto". good luck

Answer 6

Following styles would work

text-align:center;vertical-align:middle;display:table-cell;

Answer 7

The <label></label> Element is not a block level element it is an inline element.

Try this code <div style="height:30px"> <label style="display:block; margin-top:15px;"> </label> </div>