Vertically center two elements within a div [duplicate]

ghz 1years ago ⋅ 6495 views

Question

This question already has answers here :

[How can I vertically align elements in a div?](/questions/79461/how-can-i- vertically-align-elements-in-a-div) (29 answers)

[Flexbox: center horizontally and vertically](/questions/19026884/flexbox- center-horizontally-and-vertically) (14 answers)

[How can I horizontally center an element?](/questions/114543/how-can-i- horizontally-center-an-element) (131 answers)

Closed 3 years ago.

I am trying to vertically center two <p> elements.

I followed the tutorial at [phrogz.net](http://phrogz.net/CSS/vertical- align/index.html) but still the elements get placed above the div, below the div, top-aligned within the div.

I would try something else but most of the questions here just point back to that tutorial.

This snippet is for a banner that is on the top of a web page.

.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;
}


<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>

Answer

Add the following: display:table; to bannerRight

display:table-cell; and vertical-align:middle; to bannerrightinner

I have not tried this, please give me feedback if it does not work. ;)

EDIT: forgot to mention: take 'float' and 'position' properties off

#css