小编典典

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

html

我正在尝试垂直居中放置两个<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>

阅读 800

收藏
2020-05-10

共1个答案

小编典典

添加以下内容:display:table; 到bannerRight

显示:表格单元格;和vertical-align:middle; 向bannerrightinner

我没有尝试过,如果不行,请给我反馈。;)

编辑:忘了提及:关闭“浮动”和“位置”属性

2020-05-10