如何垂直對齊JavaScript文本？

我有一個內置文本的警告框，但我想不出任何方法將警報框div內的文本向下移動，垂直居中。我已經嘗試了行高，但當然，這對我在瀏覽器中以最小寬度320px和最大480px查看時出現的兩行文本無效。 #alertmsg應該保持在頂部，但是，在移動瀏覽器上查看時，它的文本應該居中。我也嘗試了垂直對齊，但那也不管用。有沒有人有什麼建議？如何垂直對齊JavaScript文本？

任何幫助將不勝感激。我也嘗試在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()); 
     } 
    } 
});

來源

2013-11-02 Marlon Fowler

不能對齊的JavaScript字符串，因爲字符串沒有格式或位置。 – Oriol

@Marlon Fowler是你遇到的問題，如果你對它的垂直對齊感到非常敏感，那麼你可以通過http://jsfiddle.net/CRRRs/ – 2013-11-02 21:42:55

來解決這個問題......將它包裹成跨度......獲得跨度高度並相應地調整跨度位置文本 – charlietfl

你可以使用

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

Demo

來源

2013-11-02 21:45:02 Oriol

如何垂直對齊JavaScript文本？

回答

相關問題