Vertikal-center-zwei Elemente in einem div

Ich versuche zu vertikal-center zwei <p> Elemente.

Ich folgte das tutorial auf phrogz.net aber immer noch die Elemente, die sich oben das div, unterhalb des div, nach oben ausgerichtet in die div.

Ich würde versuchen etwas anderes, aber die meisten der Fragen, die hier nur zu verweisen, tutorial.

Dieses snippet ist für ein banner, das auf der Spitze einer web-Seite.

CSS:

.banner {
  width: 980px;
  height: 69px;
  background-image: url(../images/nav-bg.jpg);
  background-repeat: no-repeat;
  /* color: #ffffff; */
}

.bannerleft {
  float: left;
  width: 420px;
  text-align: right;
  height: 652px;
  line-height: 52px;
  font-size: 28px;
  padding-right: 5px;
}

.bannerright {
  float: right;
  width: 555px;
  text-align: left;
  position: relative;
}

.bannerrightinner {
  position: absolute;
  top: 50%;
  height: 52px;
  margin-top: -26px;
}

HTML:

<div class="banner">
  <div class="bannerleft">
    I am vertically centered
  </div>
  <div class="bannerright">
    <div class="bannerrightinner">
      <p>I should be</p>
      <p>vertically centered</p>
    </div>
  </div>
  <div class="clear">
  </div>
</div>

InformationsquelleAutor Romuloux | 2012-08-15
Schreibe einen Kommentar