-3

I tried to make a text inside a div, I made code saying: text-align:center; and padding:30px 0px; but padding is NOT working..the text just stays at the top of the div, but should be in the center..(from top to bottom).

Maybe is it because of the div's position absolute??

I don't know, please help me

David Stančík
  • 330
  • 3
  • 23
  • possible duplicate of [Center text in div?](http://stackoverflow.com/questions/6055412/center-text-in-div) – Jesse Sep 16 '15 at 17:20
  • More like a duplicate of http://stackoverflow.com/q/8865458/830125. But either way, this has been asked a million times before and should not be answered here. – Drew Gaynor Sep 16 '15 at 17:31
  • Well, no, cause I know how to do that, but it does not work, please give me back my + points :) – David Stančík Sep 16 '15 at 17:35
  • Please do a search for "vertically align text in a div" and you'll see what I mean. This is the first result: http://stackoverflow.com/q/2939914/830125. This question is a duplicate. If none of those results can fix your problem, then please add additional relevant code. – Drew Gaynor Sep 16 '15 at 17:38

4 Answers4

1

Since the div's position is absolute, You can use the top, bottom, left, and right attributes to add a padding around the div.

smith
  • 486
  • 3
  • 9
0

text-align: center; is used for horizontal alignment. For vertical alignment, there are other methodologies you should use. Take a look at this link, it gives you all different bits and pieces: https://css-tricks.com/centering-css-complete-guide/

shadowf
  • 1,096
  • 12
  • 15
0
.container {
    position: absolute;
    text-align: center;
    padding : 30px 0;
}

Your css may be look like above css code. If you given absolute position for the div you are removing the flow of the div from the dom tree. so its width may be shrink to the content of the text width. So you need to mention the width for the div as below. it will work jsfiddlelink

.container {
    position: absolute;
    text-align: center;
    padding : 30px 0;
    width: 100%; 
}
user3377509
  • 1
0

Why don't you use line-height: [height of div]?

.container {

position: absolute;
height: 100px; (or anything else)
line-height: 100px; (must be the same as the height)
text-align: center;

}

Then it should be centered. I Hope I helped! :-)

Tom291
  • 447
  • 1
  • 3
  • 14