-3

on this site (http://whitewashed.richiesiegel.com/) the text on this page currently had a padding-top that is setting the height, but i want to replace that to vertically center it within the div, but the normal properties don't seem to be working.

CSS

#header {
    height: 100%;
    width: 100%;
    background-image:url(images/5pointz_white_door.jpg);
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
    vertical-align: middle;
}
rs19
  • 657
  • 1
  • 10
  • 22
  • 1
    Did you check the questions that show up under the "Related" heading on the right? E.g. http://stackoverflow.com/questions/7616969/center-text-vertically-within-div?rq=1 – Frank van Puffelen Dec 07 '13 at 17:10
  • This has been asked many many times. Any reason the other questions related to this didn't take care of your issue? – span Dec 07 '13 at 17:11
  • @FrankvanPuffelen i have and they don't seem to fix it. – rs19 Dec 07 '13 at 17:12
  • @rattmuff i just tried matching the link Frank sent and adding display: table-cell; doesn't fix it. it's complicated i think because of the background image. just added link to the site im working on. – rs19 Dec 07 '13 at 17:13

4 Answers4

0

insert p on your header and change css on this:

#header{
    height: 100%;
    width: 100%;
    background-image:url(images/5pointz_white_door.jpg);
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;   
    display: table;
}
#header p {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}
mcmac
  • 1,042
  • 9
  • 13
0

add this

#header {
    height: 100%;
    width: 100%;
    background-image:url(images/5pointz_white_door.jpg);
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
    vertical-align: middle;
    text-align: center;
} 

   #yourdiv {
        vertical-align: middle;
        text-align: center;
   }
Minh
  • 341
  • 4
  • 12
0

this is working:

you must add another div element

try

mcmac
  • 1,042
  • 9
  • 13
  • i copied exactly what you said and it's still not right. see here http://whitewashed.richiesiegel.com/ – rs19 Dec 07 '13 at 17:25
0

The display:table solution does work; however, you have to push the header out from under your nav bar at the top of the page. The text doesn't appear centered within the header div even though it is because your nav bar is covering part of the header currently.

You can fix this by adding

#header{
padding-top:59px; <!-- the height of the nav bar -->
}

and then removing the padding from your title element and adding

display:table-cell;

This jsfiddle shows how it works ( I put a set height on the header for demo purposes, but I tested it on your actual site with height:100% and it works just fine).

While making the fiddle, I noticed two other things. I don't think you need three separate classes for each text element in the header, as they all contain the same code, so I made one in the fiddle called .neue. And why not set the font-size for each of them in the CSS instead of your HTML?

ERose
  • 189
  • 5
  • thanks for doing this. so the fiddle is right as you said and i copied that code in and it still doesnt work for me. any thoughts? appreciate the help. – rs19 Dec 08 '13 at 04:01
  • i tested it on your actual site using chrome's inspect element and it worked great. did you add the top padding on the header? – ERose Dec 08 '13 at 08:02
  • also, as i mentioned in my answer, i changed your classes in the html and the height on your header element. you might want to check those too. – ERose Dec 08 '13 at 08:05
  • that's so weird. i copied your css again right from the fiddle and nothing changed. if you take the site as it is and change the css in the inspect element, what do you have to change for it to work for you? – rs19 Dec 08 '13 at 18:52
  • i explained the three things you have to do to center the title block in my answer. it's not hard. add the padding to the header, add display:table-cell to the title div, and remove the padding from the title div. i tested it. it works. the title block is centered in the div. – ERose Dec 08 '13 at 23:07
  • i got it. there was some extra padding way down in my css that i deleted. thanks again for your help! appreciate it. – rs19 Dec 09 '13 at 18:39