2012-06-25 6 views
1

Voici l'image de mon problème: http://i48.tinypic.com/2roszr9.jpg. Je veux vous demander si vous savez comment centrer le numéro dans la boîte bleue, pour être au milieu du vert. Donc, si le texte dans la boîte verte est plus long, je veux centrer le numéro du titre au milieu de ce texte. Voici le code:Alignement vertical du texte

<style> 
.right-content-text { 
    width: 235px; 
} 
.right-content-text p { 
    background: red; 
    float: left; 
    width: 235px; 
    height: auto; 
} 
span.index { 
    background: blue; 
    width: 35px; 
    float: left; 
    text-align: center; 
    font-size: 14px; 
    color: #373A40; 
    font-weight: bold; 
} 
span.text { 
    width:200px; 
    background: green; 
    vertical-align:middle; 
    float: right; 


} 
span.text a { 
    text-decoration: none; 
    font-size: 14px; 
    font-weight: normal; 
    color: #373A40; 

} 
</style> 
<div class="right-content-text"> 
    <p><span class="index">2.</span><span class="text"><a href="#">Lorem ipsum dolor sit amet</a></span><div class="clear"></div></p> 
    <p><span class="index">3.</span><span class="text"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></span><div class="clear"></div></p> 
    <p><span class="index">4.</span><span class="text"><a href="#">Pellentesque aliquet pulvinar tortor, sed pretium nisl mollis eget. </a></span><div class="clear"></div></p> 
    <p><span class="index">5.</span><span class="text"><a href="#">Fusce vestibulum molestie quam, et lacinia nibh egestas quis.</a></span><div class="clear"></div></p> 
</div> 

Répondre

0

Hey vous pouvez maintenant utilisé

display: table-cell; dans votre classe de texte.

span.index { 
    background: blue; 
    width: 35px; 
    display:table-cell; 
    vertical-align:middle; 

    text-align: center; 
    font-size: 14px; 
    color: #373A40; 
    font-weight: bold; 
} 
span.text { 
    width:200px; 
    background: green; 
    display:table-cell; 
    vertical-align:middle; 



} 

Démo en directhttp://jsfiddle.net/EHM5p/

+1

il, ne fonctionne pas :( – Geril

+0

i mettre votre code texte classe 'span.text css { \t largeur: 200px; \t sur fond vert; \t vertical-align: milieu; \t float: right; affichage \t \t: inline-block; vertical-aligner: milieu; – Geril

+0

ça marche pas .. – Sajmon