我将如何垂直对齐JavaScript文本

How would I vertically align JavaScript text?

本文关键字：对齐 JavaScript 文本 垂直 何垂直      更新时间：2023-09-26

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

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

这是我的 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());
        }
    }
});
您可以使用 

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

演示

相关文章：