垂直居中和水平頂部對齊位置固定元素

我正在爲我正在構建的網站提供一個jQuery通知系統，並且我需要通知橫幅在頁面上以水平和垂直居中頂部對齊。垂直居中和水平頂部對齊位置固定元素

我想出了頂部的路線，但我無法得到垂直中心。

我試過margin:0 auto;left:50%;left:50%;和right:50%;，但沒有一個工作。

似乎工作的唯一的東西是估計中心像left:40%;，但只適用於一個視口/分辨率，我需要一些響應。

如何垂直居中通知？

您可以通過單擊任何位置在jsfiddle（這裏：http://jsfiddle.net/f85eZ/）中觸發通知。

來源

2013-11-28 gomangomango

只需將您的.notification-board的寬度更改爲百分比即可。因爲.notification-board是您的父容器。例如：

.notification-board{ 
    width:50%; 
    ... 
}

然後創建一個新的類以一半計算左定心：

.notification-board.center{ 
    left: 25%; 
}

看到你的這個更新的提琴：http://jsfiddle.net/f85eZ/2/

是的，我改變了點擊處理程序來初始化像這樣的創建：

$('*').on('click', function() { 
    $.createNotification({ 
     horizontal:'center', 
     vertical:'top', 
     ...

注意，它是水平的中心和垂直的頂部。（不水平頂部和垂直中心！）

來源

2013-11-28 07:14:44 Abhitalks

但我不希望通知採取的視口的50％的寬度，我只希望它採取的通知消息的空間。 – gomangomango

你已經設置寬度爲250px，這意味着你有一個固定的寬度，而不是根據消息長度？我對嗎？ – Abhitalks

是的，那是因爲，這個信息只有一個信息在這個網站，它可以是一個固定的寬度。所以如果你能以固定寬度工作，那很好。 – gomangomango

我只添加left:50%;到您的.notification-board > .notification，它工作正常！

小提琴：http://jsfiddle.net/logintomyk/5N9E3/

來源

2013-11-28 07:17:18 NoobEditor

它在大多數地方運行良好，但不適用於小視口。你建議我在那裏做什麼？ – gomangomango

@Mayank：當'createnotification'使用右上角的選項初始化時它會工作嗎？ – Abhitalks

@gomangomango：如果您的迴應是您的擔憂，那麼您應該考慮「媒體查詢」！ :) – NoobEditor

試試這個CSS上的所有視/分辨率這項工作，因爲你需要在中心點。

.notification-board{ 
    width:auto; 
    font-family:'a', 'iconFont', 'Roboto Slab', 'Myriad Pro', 'Open Sans', sans-serif; 
    position:fixed; 
    z-index:9999; 
    margin:auto; 
    display:table; 
    } 

    .notification-board > .notification{ 
    background:#000000; 
    background:rgb(0, 0, 0); 
    background:rgba(0, 0, 0, 0.65); 
    border-radius:6px; 
    color:#ffffff; 
    color:rgb(255, 255, 255); 
    padding:16px; 
    position:relative; 
    display:inline-block; 
    width:auto; 
    margin:auto; 

    }

看到的jsfiddle

http://jsfiddle.net/f85eZ/8/

來源

2013-11-28 07:22:57

是的，但是它給出了通知整個視口的寬度。我需要的三個要求是它是以頂端爲中心的，它只擴展了通知內容的寬度，而不是更多，並且適用於所有視口。 – gomangomango

我更新了我的代碼和jsfiddle現在看到@gomangomango –

@gomangomango現在看到代碼和jsfiddle我現在更新它是在頂部居中，它也是自動寬度作爲您的通知內容它完成您的所有要求。 –

垂直居中和水平頂部對齊位置固定元素

回答

相關問題