DIV 태그의 세로 맞춤

안녕하세요, 세로 정렬 : div에서 중간이 작동하지 않습니다. 내 코드에서 버그를 확인해 주시겠습니까? 나는 정상을 사용하지 않고 DIV 태그로 텍스트를 정렬 할, .....DIV 태그의 세로 맞춤

내 코드입니다, 빨리 사전에 감사합니다 ..... 가능한 응답 properties.Please 왼쪽

<!DOCTYPE HTML> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> body{ font-size:0.7em; font-family:Arial; } .TimeFrame,.YearFrame,.QuarterFrame,.MonthFrame,.Year,.Quarter,.Month,.PrevYear,.NextYear{ position:absolute; height:20px; } .YearFrame,.QuarterFrame,.MonthFrame{ border:1px solid black; border-radius:4px; } .TimeFrame{ top:10px; width:716px; } .YearFrame{ width:145px; left:17px; } .QuarterFrame{ width:121px; left:200px; } .MonthFrame{ width:439px; left:330px; } .Year,.Quarter,.Month{ cursor:pointer; border-right:1px solid black; vertical-align:middle; } .Year{ padding:0px 8px; 0px 8px; } .Quarter{ padding:0px 5px; 0px 5px; } .Month{ padding:0px 6px; 0px 6px; } .PrevYear{ left:0px; top:2px; } .NextYear{ left:165px; top:2px; } </style> </HEAD> <BODY> <div class="TimeFrame"> <div class="PrevYear"><img src="round_arrow_left.png" alt="Previous" title="Previous"></div> <div class="YearFrame"> <div class="Year" style="left:1px;">2000</div> <div class="Year" style="left:49px;">2001</div> <div class="Year" style="left:97px;border:none;">2002</div> </div> <div class="NextYear"><img src="round_arrow_right.png" alt="Next" title="Next"></div> <div class="QuarterFrame"> <div id="Q1" class="Quarter" style="left:1px;">Q1</div> <div id="Q2" class="Quarter" style="left:31px;">Q2</div> <div id="Q3" class="Quarter" style="left:61px;">Q3</div> <div id="Q4" class="Quarter" style="left:91px;border:none;">Q4</div> </div> <div class="MonthFrame"> <div id="JAN" class="Month" style="left:1px;">Jan</div> <div id="FEB" class="Month" style="left:37px;">Feb</div> <div id="MAR" class="Month" style="left:74px;">Mar</div> <div id="APR" class="Month" style="left:111px;">Apr</div> <div id="MAY" class="Month" style="left:146px;">May</div> <div id="JUN" class="Month" style="left:185px;">Jun</div> <div id="JUL" class="Month" style="left:221px;">Jul</div> <div id="AUG" class="Month" style="left:252px;">Aug</div> <div id="SEP" class="Month" style="left:290px;">Sep</div> <div id="OCT" class="Month" style="left:328px;">Oct</div> <div id="NOV" class="Month" style="left:363px;">Nov</div> <div id="DEC" class="Month" style="left:401px;border:none;">Dec</div> </div> </div> </BODY> </HTML>

출처

2012-02-08 Rama Rao M

또한 이러한 효과를 달성하기 display:table-cellvertical-align:middle 조합을 사용하는 것이 가능하다.

은 내가 span에 년의 각 포장이 CSS를 사용 :

참조 바이올린 여기

.Year { 
    display:table; 
} 
.Year span { 
    display:table-cell; 
    vertical-align:middle; 
}

: http://jsfiddle.net/stephendavis89/7QPx8/1/ (만 년이 수직으로 집중되어)

P.S.을 왼쪽 위치에 놓기보다는 몇 년, 4 분기 및 몇 달 동안 떠 다니는 것을 고려할 수 있습니다.

출처

2012-02-08 17:06:30

스티븐 덕분에 괜찮습니다 ... –

듣기 좋았습니다. :) –

vertical-align은 같은 인라인 요소에서 정렬을 설정하기위한 것이 아닙니다. 그것이하는 것과하지 않는 것의 더 나은 이해를 위해이 페이지를 확인하십시오. 기본적으로 수직 정렬은 요소에 대한 이전 valign 속성이나 요소와 같은 항목에 대한 align 속성을 대체하기위한 것입니다. 그것은 div에서 텍스트를 수직으로 정렬하는 것입니다. 패딩이나 위치 지정을 통해이를 수행해야합니다.

http://phrogz.net/css/vertical-align/index.html

출처

2012-02-08 16:57:00 Brian

감사합니다. 친절한 정보를위한 두뇌 .... –

DIV 태그의 세로 맞춤

답변

관련 문제