0

我一直在谷歌上搜索并找到很多条目，其中大部分使用像这样的表格单元格：

http://www.vdotmedia.com/blog/vertically-center-content-with-css/

它们工作正常，但为什么我将 DOCTYPE 更改为 XHTML1.1，我需要一个 EPUB 页面：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

它不再起作用了。我运气不好？我有长度不同的文本块，我想在 epub 阅读器（例如 iBooks）的页面上垂直居中（它基于 WebKit——我不需要担心其他浏览器）。

4

3 回答 3

2

您可以尝试另一个技巧。

如果你有这个结构：

<div class="container">
    <div class="text">
    Some text you need aligned vertically
    </div>
</div>

在您拥有的 CSS 上：

.container {
    height: 50px;
    position: relative;
}

.text {
    position: absolute;
    top: 50%;
}

如果你愿意，你可以试一试。当然，将高度更改为您需要的任何高度。

于 2011-12-12T18:53:50.103 回答
2

仅使用 height:100% 的桌子似乎可以在角落工作。

我试过 

.container{display:table;height:100%;}
.content{display:table-cell; height:100%; vertical-align:middle;}

这在 XHTML 1.0 和 XHTML 1.1 中不起作用，因为 html 和 body 也需要设置为 100%

html{height:100%}
body{height:100%}
.container{display:table;height:100%;}
.content{display:table-cell; height:100%; vertical-align:middle;}

这适用于 Chrome，所以我假设它适用于所有 webkit 浏览器（包括 iPad 阅读器。它基于 webkit，对吗？）但它在角落里不起作用。这就是我的诀窍。

html{height:100%}
body{height:100%}
table { width: 100%; height: 100%; }
tr {width:100%; height:100%; vertical-align:middle;}
td {width:100%; height:100%; vertical-align:middle;}
h1#Title{font-size:6em;text-align: center; font-family:Logan; margin:0em;}

可能有一些额外的规则，但是我没有一个很好的开发环境（Sigil -> Chrome -> Nook）。

于 2012-03-03T04:36:19.897 回答
1

更多地测试我的反应，我意识到这还为时过早......你能不能总是把你的 div 放在屏幕的中央：

.text {
    position: absolute;
    top: 50%;
}

这是小提琴：http: //jsfiddle.net/fAfX4/1/

于 2011-12-12T19:20:12.597 回答