这并非无关紧要:Roseannebarr.tumblr.com 是我制作的主题所在的地方。
如果它们是 position:absolute;，我如何让这些弹出窗口居中？
如你所知，我正在构建一个 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>
最佳答案
如果您知道弹出窗口的大小，请像这样设置 CSS:
.popup {
position:absolute;
top:50%; left:50%;
width:320px; height:240px;
margin-top:-120px; margin-left:-160px;
}
这会将左上角的弹出窗口置于页面的中央，然后负边距将其准确居中。
关于html - 如何让弹出窗口始终居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4567940/