Вертикальное выравнивание div в XHTML 1.1 для EPUB? - PullRequest
Новая
       39

Вертикальное выравнивание div в XHTML 1.1 для EPUB?

0 голосов
/ 12 декабря 2011

Я гуглю это и нахожу много записей, большинство из которых используют ячейки таблицы, например:

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 - мне не нужно беспокоиться о других браузерах).

Ответы [ 3 ]

2 голосов
/ 03 марта 2012

Только при использовании стола с высотой: 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, верно?) Но это не сработало на nook. Это то, что помогло мне. 

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).

2 голосов
/ 12 декабря 2011

Есть еще один трюк, который вы можете попробовать.

Если у вас есть такая структура: 

<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%;
}

Вы можетеЕсли хочешь, попробуй.Измените высоту так, как вам нужно, чтобы она была, конечно.

1 голос
/ 12 декабря 2011

Проверяя мой ответ больше, я понял, что это преждевременно ... Можете ли вы просто поместить свой div в центр экрана с помощью этого: 

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

Вот скрипка: http://jsfiddle.net/fAfX4/1/

...