Vertical Align eines H1 Elements gelingt nicht

[Guenny0815]

Hallo Zusammen,

ich weiß gerade nicht mehr weiter. Vielleicht sieht ja ein erfahrenerer Kollege mein Problem sofort.

Ich habe auf einer Website das Problem das ich in einem DiV die darin enthaltene Überschrift nicht in die mittel (vertical) bekomme.

CSS Code:

#body
{
position:relative;
width:100%;
max-width: 1120px;
height: 100%;
padding-top: 0px;
font-size: 100%;
margin: 0px auto;
}
/* Top Banner for Content Pages */

#banner-content
{
width:inherit;
height: 100px;
background-image: URL('img/logo.png');
background-repeat:no-repeat;
background-position:right center;
margin:5px 0px 5px 0px;
}

#h-content
{
height:inherit;
margin:0px 0px 0px 0px;
font-family:Arial;
text-align:left;

}

h1{
display: inline;
margin:0px 0px 0px 0px;
vertical-align:text-bottom;
}

HTML

<div id="banner-content" class="banner-content">
                                
             <div class="h-content" id="h-content"><h1>Überschrift</h1></div>    
                                
</div>

 

Die Überschrift ist immer oben und lässt sich nicht nach unten bzw. mitte bringen.

Denkfehler?

Grüße
Guenny0815

[eddxter]

hi @Guenny0815, so klappts bei mir:

#h-content {
  height: inherit;
  display: table-cell;
  vertical-align: middle;
  background: #ddd;
  position: relative;
  font-family: Arial;
}

s. jsfiddle: https://jsfiddle.net/eddiriarte/j11g96sr/

Bearbeitet 17. Januar 2016 von eddxter

[Guenny0815]

Klasse! Vielen Dank

Es funzt.