Question

这不是无关紧要的：Roseannebarr.tumblr.com是我正在制作的主题。

如果位置是绝对的，那么如何保持这些弹出窗口居中：？

您知道，我正在构建一个TUMBLR主题。不是网站。

HTML：如果您查看来源，则无法看到这些标记，因为它们是内容。

CSS

body {
font-family: 'Arial', sans-serif; color:#3a3a3a;
font-size:12px;
background: #e4e4e2;
word-wrap: break-word;
}

#holder {
position: relative;  
width: 500px;  
margin:0 auto;  
}

#tooltip {
display: none;
position:absolute;
width:480px;
background:#6cb4e2;
padding:10px;
}

#outer:hover #tooltip {
display: block;
}

#outer {
float:left;
}

ul, ol {
margin: 5px 0 0 30px;
}

.clear {
clear: both;
}

p {
margin: 5px 0 0 0;
}

HTML

 <body>
<div id="holder">
{block:Posts}
<div id="outer">
{block:Photo}
<img src="http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png">
<div id="tooltip">

{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}

</div>
{/block:Photo}
</div>

<div id="outer">
{block:Text}
<img src="http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png">
<div id="tooltip">

{block:Title}
<h1>{Title}</h1>{/block:Title}
{Body} {block:More}<p><a href="{Permalink}">Read on...</a></p>{/block:More}

</div>
{/block:Text}
</div>

{/block:Posts}

<div id="outer">
<img src="http://static.tumblr.com/ux4v5bf/zIrle9bek/block.png">
<div id="tooltip">

<h1>{Title}</h1>
{Description}

</div>
</div>
</div>

Answer 1

如果您知道弹出窗口的大小，请按以下方式设置CSS：

.popup {
  position:absolute;
  top:50%; left:50%;
  width:320px; height:240px;
  margin-top:-120px; margin-left:-160px;
}

这会将左上角的弹出窗口置于页面的中心，然后负边距将其精确居中。

Answer 2

您需要将事件处理程序分配给窗口的resize事件。在调整窗口大小时，将通知您的事件处理程序重新计算新中心并相应地弹出警报。

如何让弹出窗口始终居中？

2 个答案: