垂直居中和水平顶部对齐位置固定元素

我正在为我正在构建的网站提供一个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我现在更新它是在顶部居中，它也是自动宽度作为您的通知内容它完成您的所有要求。 –

垂直居中和水平顶部对齐位置固定元素

回答

相关问题