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

Question

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

我正试着把两个垂直的中心<p>元素。

我在phronz.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>

Answer 1

添加以下内容：Display：table；to bannerright显示：表格单元格；垂直对齐：中间；到边框右边。我没有试过这个，如果它不起作用，请给我反馈。；)编辑：忘记提到：去掉“浮动”和“位置”属性

Answer 2

如何对元素进行垂直、水平或两者的居中这里有两种在div中对div进行中心化的方法。一种使用CSS的方法柔性箱另一种方式是使用CSS工作台和定位财产。在这两种情况下，居中的div的高度都可以是可变的、未定义的、未知的。中心点的高度并不重要。以下是两者的HTML：<div&nbsp;id="container">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="box"&nbsp;id="bluebox"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>DIV&nbsp;#1</p> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="box"&nbsp;id="redbox"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>DIV&nbsp;#2</p> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>CSS Flexbox方法#container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;establish&nbsp;flex&nbsp;container&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;flex-direction:&nbsp;column;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;stack&nbsp;flex&nbsp;items&nbsp;vertically&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;center;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;center&nbsp;items&nbsp;vertically,&nbsp;in&nbsp;this&nbsp;case&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;align-items:&nbsp;center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;center&nbsp;items&nbsp;horizontally,&nbsp;in&nbsp;this&nbsp;case&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;300px; &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;black;}.box&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;300px; &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;5px; &nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;center;}演示两个子元素(.box)垂直对齐flex-direction: column..对于水平对齐，请将flex-direction到row(或者简单地删除如下规则：flex-direction: row是默认设置)。项目将保持垂直和水平中心(演示).CSS表与定位方法body&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;table; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%;}#container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;table-cell; &nbsp;&nbsp;&nbsp;&nbsp;vertical-align:&nbsp;middle;}.box&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;300px; &nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;5px; &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;7px&nbsp;auto;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;center;}演示用哪种方法.。如果您不确定使用哪种方法，我会基于以下原因推荐Flexbox：极小的代码；非常有效的如前所述，对中很简单，而且很容易(参见另一个示例)等高柱既简单又容易。对齐FLEX元素的多个选项是有反应的与浮标和表格不同，它们提供有限的布局容量，因为它们从来就不是用来构建布局的，柔性盒是一种具有广泛选择的现代(CSS 3)技术。浏览器支持所有主流浏览器都支持Flexbox，除IE<10..最近的一些浏览器版本，如Safari 8和IE10，需要供应商前缀..有关添加前缀的快速方法，请使用自动复位器..更多细节见这个答案.