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

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 20169 j von eddxter

Klasse! Vielen Dank

Es funzt.