Est-il possible de centrer verticalement un SPAN dans un DIV?

Voici ce que je suis:Est-il possible de centrer verticalement un SPAN dans un DIV?

<div class="slideshow"> 
    <span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet. Lorum ipsum delore sit amet.</span> 
    <span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span> 
</div><br />

Et le CSS:

/* slideshow */ 
.slideshow { 
width:940px; 
height:64px; 
text-align:center; 
background-image:url(../images/quotes.png); 
position:relative; 
} 
.slideshow span { 
display:block; 
width:940px; 
height:64px; 
}

Les <span> s sont actuellement centrées horizontalement, mais ils doivent également être centrées verticalement. Est-ce possible? L'idée générale est d'avoir des témoignages sur le dessus de l'image d'arrière-plan (citations à gauche et à droite), mais il ne semble pas tout à fait droit sans être centré horizontalement et verticalement.

Je suis sûr que je pourrais obtenir un peu l'effet désiré en utilisant padding, mais puisque chaque témoignage sera d'une longueur différente, je ne pense pas que ce serait une bonne approche.

Source

2010-10-02 Matt Untsaiyi

si vous savez que le contenu de votre durée ne dépassera jamais ligne de texte, juste définir

.slideshow span { 
    line-height: 64px /* = the height of the containing div */ 
}

Ou, si vous connaissez la hauteur de la travée:

.slideshow span { 
    display: block; 
    position: absolute; 
    height: 64px; 
    top: 50%; 
    margin-top: -32px; /* = height/2 */ 
}

La dernière option serait d'utiliser une table formée par une seule cellule en place de la div et utiliser la propriété verticale align.

Source

2010-10-02 12:23:45 mjsarfatti

Bonne idée. Je pourrais juste faire cela, mais je m'attends à ce qu'il dépasse probablement une ligne (une ligne n'est pas vraiment beaucoup d'espace.) –

I jsut a écrit quelques options plus, s'il vous plaît voir la réponse éditée ... – mjsarfatti

J'ai essayé le 'position: absolute;' option tout à l'heure, ça marche (sauf que ça devrait être 'margin-top: 32px', pas -32) mais ça pose le même problème que d'utiliser' line-height: 64px' - rien sur une ligne et ce n'est plus centré. Pourrais-je faire la dernière option sans remplacer le 'div'? Mon cycle plugin jQuery en a besoin. –

oui c'est possible. Utilisez l'attribut CSSvertical-align:middle.

Si vous souhaitez aligner verticalement ci-dessous ou au-dessus de la position centrale horizontale puis utiliser comme ceci:

vertical-align:5;

vertical-align:-5;

Source

2010-10-02 11:10:05 GitsD

J'ai essayé d'utiliser 'vertical-align: milieu,' sans succès. Pourriez-vous me montrer comment je le ferais dans le code que j'ai fourni? –

vous pouvez utiliser padding pour div. – GitsD

J'ai déjà mentionné le rembourrage n'aurait pas de sens. –

CSS:

<style> 
    div { 
     width:300px; height:300px; 
     text-align:center; 
     display:table-cell; vertical-align:middle; 
    } 
</style>

HTML:

<div> 
    <span>The Span</span> 
</div>

Source

2010-10-02 13:04:19

Vous me battez en millisecondes avec la propriété d'affichage de la table-cellule. –

IE ne supporte pas l'affichage: table-cellule malheureusement ... – mjsarfatti

Et cela ne fonctionne pas de toute façon :(J'ai ajouté 'display: table-cellule; vertical-aligner: middle;' à mon '.slideshow' et mon le contenu va directement au haut de ma page, même au dessus de ma navigation heh –

Est-il possible de centrer verticalement un SPAN dans un DIV?

Répondre

Questions connexes