Alignement Vertical dans la balise DIV

Salut à tous,
vertical-align:middle ne fonctionne pas dans le div. Pouvez vous s'il vous plaît vérifier le bug dans mon code. Je veux aligner le texte dans la balise DIV, sans l'aide d'en haut,à gauche propriétés.S'il vous plaît répondre dès que possible......
Merci d'avance,

Voici mon code.....

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

InformationsquelleAutor Rama Rao M | 2012-02-08

3

Il est possible d'utiliser vertical-align:middle combiné avec display:table-cell pour obtenir cet effet.

J'ai enveloppé chacun de vos Années dans un span et utilisé ce CSS:
```
.Year {
display:table;
}
.Year span {
display:table-cell;
vertical-align:middle;
}
```
Voir tripoter ici: http://jsfiddle.net/stephendavis89/7QPx8/1/ (seules les années sont centrés verticalement)

P. S. Vous pourriez envisager de gauche flottant de vos années, trimestres, mois au lieu de gauche de positionnement eux.

InformationsquelleAutor Steve Davis
0

vertical-align n'est pas destiné à définir l'alignement dans les éléments en ligne comme. Pour une meilleure compréhension de ce qu'il fait et ne le fait pas, consultez cette page. Essentiellement vertical-align est destiné à remplacer l'ancien attribut valign d'éléments ou de l'attribut align pour des choses comme les éléments. Ce qu'il ne est alignez verticalement le texte dans une div. Vous devrez le faire par le biais de rembourrage ou de positionnement.

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

InformationsquelleAutor Brian

Vous devez vous connecter pour publier un commentaire.