0

我有一个带有文本的警报框，但我想不出任何方法可以将文本在警报框 div 中向下移动，使其垂直居中。我已经尝试过 line-height ，但是当您在最小宽度为 320px 和最大 480px 的浏览器上查看它时，这当然不适用于我拥有的两行文本。#alertmsg 应该保留在顶部，但是，在移动浏览器上查看时，其中的文本应该居中。我也尝试过垂直对齐，但这也不起作用。有没有人有什么建议？

任何帮助将不胜感激。我还尝试<p>在 JavaScript 中放置一个；没运气。

这是我的CSS：

#alertmsg {
    position:absolute;
    background-color:#252525;
    top:0px;
    padding-left:0px;
    width:100%;
    font-family:'gotham-medium', arial, sans-serif;
    src:url("http://www.3elementsreview.com/fonts/gotham-light.ttf");
    font-style:normal;
    font-weight:normal;
    font-size:1.2em;
    line-height:1.2em;
    text-align:center;
    height:63px;
    color:#ffffff;
    opacity:1;
    display:inline-block;
    overflow:hidden;
    z-index:1000;
    border-bottom:2px solid #ff6000;
}

还有我的 JavaScript：

$(document).ready(function() {
    if (typeof window.sessionStorage != undefined) {
        if (!sessionStorage.getItem('mySessionVal')) {
            $('<div />', {
                id   : "alertmsg",
                text :"Join our email list and receive the latest updates at 3Elements Review.",
                on   : {
                    click: function() {
                        $(this).slideUp(200);
                    }
                }
            }).appendTo('body').fadeIn(1).delay(6000).fadeOut("slow");
            sessionStorage.setItem('mySessionVal', true);
            sessionStorage.setItem('storedWhen', (new Date()).getTime());
        }
    }
});
4

1 回答 1

0

你可以使用

#alertmsg {
    position:absolute;
    top: 50%;
    height:63px;
    margin-top: -31.5px; /* half height */
}

演示

于 2013-11-02T21:45:02.517 回答