垂直居中Div中的两个元素 [英] Vertically Center Two Elements within a Div

问题描述

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

I am trying to vertically center two <p> elements.

a href =http://phrogz.net/CSS/vertical-align/index.html =nofollow> phrogz.net 但仍然的元素放置在div上面，div下面，顶部

I followed the tutorial at phrogz.net but still the elements get placed above the div, below the div, top-aligned within the div.

我会尝试其他的，但大多数问题在这里只是指向那个教程。

I would try something else but most of the questions here just point back to that tutorial.

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

This snippet is for a banner that is on the top of a web page.

以下是示例代码css first

Here is the sample code css first

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

现在HTML

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

我有方法＃2工作正常，但似乎不知道发生了什么方法＃1

I got method #2 working just fine but can't seem to figure out what is going on with method #1

推荐答案

添加以下内容：
display：table; to bannerRight

Add the following: display:table; to bannerRight

display：table-cell;和
vertical-align：middle; to bannerrightinner

display:table-cell; and vertical-align:middle; to bannerrightinner

我没有尝试过，请给我反馈，如果它不工作。 ;）

I have not tried this, please give me feedback if it does not work. ;)

编辑：忘记提及：将'float'和'position'属性关闭

forgot to mention: take 'float' and 'position' properties off

这篇关于垂直居中Div中的两个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！