DIVタグでの垂直方向の整列

こんにちはすべて、 vertical-align：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-cellと組み合わせvertical-align:middleを使用することが可能です。

私はspanであなたの年のそれぞれを包み、このCSSを使用：http://jsfiddle.net/stephendavis89/7QPx8/1/（だけ年が垂直方向に中央揃えされている）

P.S.：

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

はここにフィドルを参照してください。あなたの年月日、四半期、および月を浮かせたままにしておくのではなく、左に置くことを検討することをお勧めします。

出典

2012-02-08 17:06:30

スティーブンさん、ありがとうございます... –

嬉しいです。 :) –

vertical-alignは、のようなインライン要素の配置を設定することを意図していません。それが何をするかしないかをよりよく理解するために、このページをチェックしてください。基本的にvertical-alignは、要素の古いvalign属性や要素などのalign属性を置き換えることを意図しています。それは、div内のテキストを垂直方向に揃えることではありません。あなたはパッディングやポジショニングをしなければなりません。

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

出典

2012-02-08 16:57:00 Brian

おかげさまで、お元気ですかな情報になりました。 –

DIVタグでの垂直方向の整列

答えて

関連する問題