Comment centrer verticalement l'image et le texte dans un élément de bloc? [CSS]

help me Comment centrer verticalement l'image et le texte dans un élément de bloc? [CSS]

J'essaye d'accomplir ceci avec CSS. Voici mon code:

<h2> 
    <img src="A.gif" alt="A" width="30" height="30" /> 
    <img src="B.gif" alt="B" width="30" height="30" /> 
    18 pt; vertically centered; 
</h2>

A et B sont des images de pixels 30x30.
petites lignes rouges sont de 5 pixels rembourrages/marge (selon les)
En raison de la hauteur du rembourrage images et vertical, le récipient le plus extérieur a une hauteur de 40 pixels (30 + 5 + 5).
La largeur du conteneur le plus à l'extérieur est de 100%.

Note: Il n'y a aucune chance le texte 18pt va déborder la largeur du récipient. Supposons que ce sera toujours une ligne.

Remarque: Si plus de balisage permet d'obtenir la vue souhaitée, le balisage peut être modifié.

Comment cela peut-il être accompli?

Source

2010-08-23 maček

Si je ne me trompe pas, vous pouvez utiliser la propriété vertical-align: text-bottom sur un img pour réaliser ce genre de résultat.

Voici un petit test: http://www.w3schools.com/Css/tryit.asp?filename=trycss_vertical-align

Vous pouvez essayer de supprimer les styles là-bas et en les remplaçant par
img { vertical-align: text-bottom; }
et le texte doit être aligné au centre souhaité de l'élément de page.

Source

2010-08-23 20:15:05 alexcoco

le' img' n'a pas autant de problèmes que le texte. –

@macek Oui, je vois le problème, essayez-le bien. C'était étrange pour moi que vous deviez spécifier l'alignement pour le texte en utilisant le style 'img' mais il alignait verticalement le texte. Je ne l'ai pas essayé pour les grands paragraphes mais pour les petites lignes simples cela fonctionne bien. – alexcoco

Aussi, comme joroen mentionné, vous pouvez définir le 'line-height' du texte au même nombre de pixels que la hauteur du conteneur (qui est de 30px de ce que je peux rassembler, je ne pense pas que le remplissage doit être comptabilisé). – alexcoco

Vous pouvez définir la hauteur de ligne sur 40px, ce qui devrait entraîner le centrage vertical du texte si ce n'est qu'une ligne.

h2 { 
    line-height: 40px; 
} 
h2 img { 
    padding: 5px; 
    vertical-align: middle; 
}

Source

2010-08-23 20:11:03 jeroen

J'ai essayé ceci et le texte est descendu au fond du 'h2'. –

@macek: ça marche pour moi dans Firefox, même sans le rembourrage sur les images. Avez-vous un ensemble de doctype? – jeroen

@macek: Je vois que IE8 est en train de créer des problèmes et a besoin d'un 'vertical-align: middle', je vais éditer la réponse .... – jeroen

Comment centrer verticalement l'image et le texte dans un élément de bloc? [CSS]

Répondre

Questions connexes