我正在尝试垂直居中放置两个<p>元素。
<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
我没有尝试过,如果不行,请给我反馈。;)
编辑:忘了提及:关闭“浮动”和“位置”属性