EPUB 용 XHTML 1.1의 세로 정렬 div?

는이 같은 테이블 셀을 사용하는 대부분이 인터넷 검색과 이용에 많은 항목을 찾을 수있다 :EPUB 용 XHTML 1.1의 세로 정렬 div?

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

그들은 잘 작동,하지만 난 XHTML1.1에 DOCTYPE을 변경 이유 I 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">

더 이상 작동하지 않습니다. 나는 운이 없다? iBooks (WebKit 기반 - 다른 브라우저에 대해 걱정할 필요가 없음)와 같은 epub 독자의 페이지를 세로로 가운데에 배치하려는 길이가 다른 텍스트 블록이 있습니다.

출처

2011-12-12 Steve

XHTML 1.1은 XML 전용 응용 프로그램 용이라는 것을 알고 있습니까? 그리고 왜 당신은 doctype을 전혀 바꾸고 있습니까? 그것은 당신이 내려 놓고 그것을 결코 바꾸지 않는 첫번째 일이어야합니다. – Rob

예, 알고 있습니다. InDesign에서 내보내는 방식은 항상 XHTML1.1이었습니다. CSS를 추가해도 파일에서 작동하지 않지만 해당 웹 사이트의 샘플에서 작동 했으므로 DOCTYPE이 예제 파일을 가져 와서 내 문서와 일치하도록 변경하여 의심 스럽습니다. – Steve

시도 할 수있는 또 다른 속임수가 있습니다.

이 구조가있는 경우 :

<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-12 18:53:50

http://jsfiddle.net/fAfX4/ –

감사합니다. 그러나 다음과 같은 사항이 있습니다. 높이를 지정하지 않아도되므로 크기가 다른 모든 화면을 중심으로 배치 할 것입니다. – Steve

그건 힘든 일입니다. 나는 때때로 나 자신과 투쟁한다. 나는 항상'display : table-cell' 메소드로 돌아 간다. 그것은 유일한 방법 인 것처럼 보입니다. 나는 아직 더 나은 방법을 찾지 못했다. 물론 div를 테이블로 교체 할 수 있습니다. 표 셀은 기본적으로 세로로 가운데에 배치됩니다. 네가 테이블에서 떨어져 있어야한다고 생각하지만, 그것이 작동한다면 ... –

내 대답 더 많은 테스트, 나는 그냥 항상이 화면의 중심에 당신의 사업부를 넣을 수 ...는 시기상조 실현 : 여기

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

바이올린는 다음과 같습니다 만 http://jsfiddle.net/fAfX4/1/

출처

2011-12-12 19:20:12 Fred

txt의 한 줄에서 작동하지만 단락이 아닙니다. http://jsfiddle.net/Fcppr/1/ 작동하지만 더 이상 가운데에 보이지 않습니다. – Steve

높이 : 100 %의 테이블을 사용하면 구석에서 작동하는 것으로 보입니다.

나는이 HTML과 몸이 또한 100 %이는 크롬에서 작동

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

로 설정 될 필요가 있기 때문에 XHTML 1.0과 XHTML 1.1에서 작동, 그래서하지 않습니다

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

시도 모든 웹킷 브라우저 (iPad 독자를 포함하여 모든 웹킷 브라우저에서 작동한다고 가정하면 웹킷을 기반으로합니다.)하지만 구석에서는 작동하지 않습니다. 이것이 나를위한 속임수였습니다.

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

은 몇 가지 추가 규칙이있을 수 있습니다,하지만 난 아주 좋은 개발 환경이 없습니다 (인장 -> 크롬 -> 구석을).

출처

2012-03-03 04:36:19 Stephen

EPUB 용 XHTML 1.1의 세로 정렬 div?

답변

관련 문제