将div中的两个元素垂直居中
我正在尝试垂直居中放置两个<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>
问题答案：
添加以下内容：display：table; 到bannerRight
显示：表格单元格；和vertical-align：middle; 向bannerrightinner
我没有尝试过，如果不行，请给我反馈。;）
编辑：忘了提及：关闭“浮动”和“位置”属性
-
我有个问题快把我逼疯了。 我有一个包装器，其中包含一个带有一些文本的div和一个图像。图像和div的大小各不相同。包装器div将调整为较大包装器的大小。 它们都应该垂直对齐，如下所示： 我偶然发现了这个帖子： http://www.jakpsatweb.cz/css/css-vertical-center-solution.html 正如你在小提琴上看到的： http://jsfiddle.net
-
问题内容： 我正在尝试制作一个小的用户名和密码输入框。 我想问一下，如何垂直对齐div？ 我所拥有的是： 如何使ID为Username和Form的div垂直对齐中心？我试着把： 在CSS中用于ID为Login的div，但似乎不起作用。任何帮助，将不胜感激。 问题答案： 现代浏览器中最好的方法是使用flexbox： 某些浏览器将需要供应商前缀。对于不支持Flexbox的较旧的浏览器（例如IE9及更低
-
问题内容： 我有两个要素并列。元素2小于元素1。两个元素都不具有固定的高度。我需要将元素2垂直居中。如何使用CSS做到这一点？ 编辑： 这是我到目前为止的内容： img1的高度将始终大于img2的高度。我希望img2垂直居中对齐。希望这可以澄清我要完成的工作。 问题答案： 最简单，最干净的方法是使用并垂直对齐。但是，IIRC（自从我开始浏览器兼容性问题以来已经有一段时间了）……也许某些普通版本的I
-
问题内容： 是否可以将 div 垂直居中于％height div中 ？ 问题答案： 在这里以及整个Internet上，已经被要求足够多次了。 快速搜索将为您带来大量结果。无论如何，我这样做的首选方式是使用和。
-
问题内容： 有没有办法在 垂直和水平方向上输入一个DIV， 但这很重要， 当窗口小于内容时，内容将不会被剪切 。div必须具有背景色，宽度和高度。 我总是将div的中心定位为绝对位置和负边距，如提供的示例所示。但是它有一个问题，那就是削减内容的顶部。有没有一种方法可以将div.content居中而不会出现此问题？ CSS： HTML： 我的问题不是重复的“如何在水平和垂直方向上居中放置元素？”1-
-
问题内容： 我想将添加到另一个div内的div居中。 这是我当前正在使用的CSS。 如您所见，我现在使用的方法取决于width和height的值。如果width / height发生变化，我将不得不修改and值。是否有任何通用解决方案可用于始终将居中对齐它的大小？ 我发现使用可以将innerDiv水平分配到中间，但是垂直分配中间呢？ 问题答案： tl; dr 垂直对齐中间作品，但是您将不得不在父元