将div中的两个元素垂直居中

Z时代
2024-01-10
分类：问答

我正在尝试垂直居中放置两个<p>元素。

我在phrogz.net上按照教程进行操作，但仍然将元素放置在div上方，div下方，在div中顶部对齐。

我会尝试其他方法，但是这里的大多数问题都只是指向该教程。

此代码段用于网页顶部的横幅。

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