css - 如何正确对齐在特定位置调整大小的东西

Question

好吧，我正在处理网页，当您尝试填写登录表单或注册表单时，如果出现任何问题，它会弹出一条消息……或者正确。我希望它位于行星图像的中心。这是一个分区。还要注意行星图像下面有文本，因此使用图像作为中心参考是不可能的。我只想知道如何将中间点设置为始终相同，这样当出现多个错误/消息时，它不会偏离中心，并且随着添加的每条消息而增长，它看起来会很好。出于个人原因，我不会透露该网站的名称。

图片：

（对不起土豆质量）

CSS：

#banner{  
    width: 800px;  
    margin-left: -400px;  
    left:50%;  
    top: 100px;  
    margin-bottom: 20px;  
    font-size: 15px;  
    font-weight: bold;  
    color:rgb(255,255,255);  
    text-align: center;  
    line-height: 30px;  
    border-radius: 15px;  
    position: absolute;  
}

html和php：

<?php 
if (empty($_SESSION['errors']) === false) {
    echo '<div id="banner" style="background-color:rgb(120,0,0);">';
    output_errors($_SESSION['errors']);
    echo '</div>';
    $_SESSION['errors'] = NULL;
}

if (empty($_SESSION['message']) === false) {
    echo '<div id="banner" style="background-color:rgb(0,100,0);">';
    output_errors($_SESSION['message']);
    echo '</div>';
    $_SESSION['message'] = NULL;
}
?>

函数 output_errors 只是将数组转换为字符串并回显它。

Answer 1

使用 Javascript 或 Jquery 获取 #banner 元素 ( http://api.jquery.com/height/ ) 的高度，然后使用结果更改元素的顶部位置。

这假设您的#banner 消息不会大于某个值，因为它最终可能会在您的页面顶部呈现。

Answer 2

听起来您希望错误在其容器中覆盖 500 像素。使用 1000px 高div和display: table-cell：

HTML

<div id="table">
    <div id="cell">
        <p>Hello</p>
        <p>Hello</p>
        <p>Hello</p>
    </div>
</div>

CSS

#table {
    width: 100%;
    display: table;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 1000px;
}
#cell {
    display: table-cell;
    vertical-align: middle;
}

里面的任何东西都#cell应该以 500px 为中心#table。例子。