在DIV標記中的垂直對齊

大家好， vertical-align：middle在div中不起作用。你能否檢查我的代碼中的錯誤。我想對齊DIV標籤與文本，而無需使用上，左properties.Please儘快..... 在此先感謝回覆，在DIV標記中的垂直對齊

這裏是我的代碼.....

<!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

它可以使用vertical-align:middle與display:table-cell相結合來達到這種效果。

我包你的每一個多年在span和使用這個CSS：

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

見小提琴這裏：http://jsfiddle.net/stephendavis89/7QPx8/1/（只有幾年的垂直居中）

附：你可能想考慮讓你的年份，季度和月份浮動，而不是左側擺放它們。

來源

2012-02-08 17:06:30

謝謝斯蒂芬，它工作正常... – 2012-02-09 03:15:28

很高興聽到它。 :) – 2012-02-09 03:57:52

vertical-align不用於設置內聯元素中的對齊。爲了更好地理解它做什麼和不做什麼，請查看此頁面。基本上，vertical-align是用來代替元素的舊valign屬性或元素的東西的align屬性。它不會做的是垂直對齊div中的文本。您將不得不通過填充或定位來完成此操作。

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

來源

2012-02-08 16:57:00 Brian

謝謝大腦爲您提供的信息.... – 2012-02-09 03:16:04

在DIV標記中的垂直對齊

回答

相關問題