Aller au contenu

Centrer un texte dans un div de manière sure


zaebas

Sujets conseillés

Je me doute que cette question a été de multiples fois abordées, mais jusqu'à maintenant, les réponses proposées sur ne net ne m'ont pas satisfaite et ce sont révélées innéficaces.

Bref, j'ai un div et je souhaiterai que le texte y soit centré verticalement.

Comment puis-je faire pour arriver à cela et que ce soit compatible avec tous les navigateurs ?

Si à défaut de solution alambiquée vous avec une méthode simple et 100% fiable, je suis preneur !

Voici mon html :

<div id="titre">
<h1>Titre</h1><!--Titre principal de la page-->
</div>

voici mon CSS :

#titre
{
width: 770px;
max-width: 770 px;
margin-bottom: 20px; /* marge sous le titre */
height:30px; /*hauteur du block titre*/
padding: 0px;
font-size: 15px; /*hauteur des caractéres du titre */
text-align: left; /*positionne le titre à gauche*/


color: rgb(255,255,255);
background-color: rgb(25,90,140 /* Une couleur de fond pour le corps */

border: 1px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

#titre h1
{
line-height: 30px;
height: 30px;
vertical-align: middle;
text-indent: 10px;
}

Lien vers le commentaire
Partager sur d’autres sites

Le seul moyen de centrer verticalement en CSS, est de donner une marge haute à ton élément (ou un padding), afin de l'espacer du bord haut.

Si tu connais à l'avance la taille de ton div, et que ton texte garde constamment la même hauteur (même nombre de lignes), ça peut faire illusion.

Lien vers le commentaire
Partager sur d’autres sites

Le seul moyen de centrer verticalement en CSS, est de donner une marge haute à ton élément (ou un padding), afin de l'espacer du bord haut.

Si tu connais à l'avance la taille de ton div, et que ton texte garde constamment la même hauteur (même nombre de lignes), ça peut faire illusion.

Ben j'ai fait ça

Ca marche sous mozilla mais pas IE !!!!

Sous IE ça me le fout n'importe où !

En plus sous IE, j'ai un problème avec un float: left; qui est pas pris en compte ! Donc le corps principal qui devrait se trouver à gauche du menu se retrouve en bas !

Mais bon, ça fera l'objet d'une autre question. Mais je me demande si ce problème de float peut créer le problème de centrage vertical du titre.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...