0

I created a featured block with HTML5 and CSS3. This block includes a background-image and some text heading. You can see it live here: http://codepen.io/anon/pen/yNWxBb

As you can see I am now using margin-top to center the text in the vertical middle of the block. And make use of the pseudo-class ::after to add a transparant dark overlay above the background-image.

I know you can vertical align a div using table in combination with table-cell and vertical-align: middle, but than it messed my markup.

Does anyone know how to fix this? And is this the right markup to do this? Or should you recommend an other markup and manner to add the transparant background to the image?

Look out to you answer/advice.

Thank you in advance.

Caspert
  • 4,271
  • 15
  • 59
  • 104
  • My answer to a similar question. Hope it helps. [How to Center Elements within a Div](http://stackoverflow.com/questions/11978231/vertically-center-two-elements-within-a-div/31977476#31977476) – Michael Benjamin Aug 18 '15 at 15:45

2 Answers2

0

Two possible solutions to your problem:

  1. http://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
  2. http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

And yes, you might want to alter the markup in order to make this possible but both articles I'm pointing you to come with example code.

Marco Hengstenberg
  • 824
  • 5
  • 15
0

I do believe this is your solution. Just replace this class in your css and it will work fine I guess.

.features figcaption header {
    position: absolute;
    top: 50%;                       
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    line-height: 34px;
    color: #FFF;
    //position: absolute;
    //top: 28%;
}
Helton Rodrigues
  • 11
  • 1