28172 sujets

CSS et mise en forme, CSS3

Centrer un texte horizontalement dans une div, je n'y arrive pas !!!!

Bonsoir a tous,

Je termine un Intranet pour l'un de mes amis, je voudrais juste centrer horizontalement mes titres dans mes div. J'ai vu les différents topic relatifs a cela, mais je n'arrive quand même pas a m'en sortir. (utilisation des marges ou des baseline). Voici mon code xhtml pour une des div concernée :


  <div class="middle_contenu">
    	<div class="middle_contenu_titre">
			<img src="img/planning_perso.png" />
        	<span class="titres_contenu">Planning perso</span>
		</div>
        <p> tiens voila du boudin </p>
    	</div>


code CSS :


.titres_contenu{
font-size:18px;
color:#3B3B3B;
}


Le but est de centrer verticalement le texte 'planning perso' dans sa div middle_contenu_titre.

Pourriez vous m'indiquer la ou les lignes a rajouter dans mon css pour centrer le texte verticalement car après moulte essai je n'y arrive point !

merci beaucoup Smiley cligne
Bonjour Manu-lyon,

As tu essayé de mettre un text-align:center; dans ton css de la class titre_contenu?
Modifié par Dim (05 Jun 2009 - 23:12)
Hello manu-lyon,

hem... si tu voulais rendre les lecteurs de ton sujet perplexes c'est réussi ! Smiley biggol

* ton titre parle de centrer un texte horizontalement : ok cool... à priori il s'agit d'un élément de type
en-ligne et donc il va falloir appliquer un text-align:center sur le bloc conteneur.

* ta première phrase confirme : je voudrais juste centrer horizontalement mes titres dans mes div. D'accord... à part un petit doute puisque s'il s'agit vraiment de titres il ne faut pas utiliser un élément SPAN mais un vrai titre Hn pour respecter la sémantique (X)HTML. Comme un titre est de type bloc il faudrait donc plutôt s'orienter vers width:une_largeur; margin: 0 auto... mais je suppose qu'il ne s'agit pas vraiment d'un titre mais d'un libellé associé à l'image.

* ensuite ça se complique : utilisation des marges ou des baseline. Aïe ! margin semble bien en rapport avec le centrage horizontal des blocs mais baseline est lié à la propriété vertical-align.

* et ça continue puisque tu dis ensuite Le but est de centrer verticalement le texte 'planning perso' dans sa div middle_contenu_titre.

* et pour finir : Pourriez vous m'indiquer la ou les lignes a rajouter dans mon css pour centrer le texte verticalement ?

Donc comme je ne sais pas bien quelle est ta demande je te propose ce bout de code qui mélange les 2 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
.middle_contenu {
	width: 600px;
	margin: 30px auto;
	padding: 20px;
	background: red;
	text-align: center;
}

.middle_contenu_titre {
	width: 400px;
	margin: 3px auto;
	background: blue;
}

.middle_contenu_titre img, .middle_contenu_titre span {
		vertical-align: middle;
}

.titres_contenu {
	font-size:18px;
	color:#3B3B3B;
}
</style>
</head>
<body>
<div class="middle_contenu">
	<div class="middle_contenu_titre">
		<img src="img/planning_perso.png" alt="" />
		<span class="titres_contenu">Planning perso</span>
	</div>
	<p>Tiens voilà du boudin ! mdr ptdr !</p>
</div>
</body>
</html>

Et voici l'article associé.
Modifié par Heyoan (06 Jun 2009 - 07:43)
lol ! en effet je me suis un peu emmelé les pinceaux, la fatigue du vendredi soir y est pour beaucoup !!! Smiley biggol

Je veux en effet centrer verticalement du texte dans ma div.

j'avais pour cela appliqué un vertical-align, mais pas sur le bon élément apparement. Je l'avais mis sur .titres_contenu qui est la classe utilisée pour les <span> que je veux centrer. Mais il faut apparement l'appliquer sur son conteneur avec .middle_contenu_titre span , c'est bien ca ?

En tout cas merci pour votre aide (et d'avoir compris ma demande Smiley lol ).
Merci , ca marche nikel.
J'essaye de faire de même pour la div 'middle_top' (j'aimerais que l'image soit alignée verticalement) j'ai donc appliqué le bout de code suivant : 


.middle_top img, .middle_top span {

		vertical-align: middle;

}


Mais elle ne se met pas au centre mais en haut de la div. Quelqu'un aurait-il une idée ?

Question subsidiaire de curiosité concernant la div 'middle_contenu_titre' : pourquoi suis-je obligé d'aligner l'image ET le span pour que le texte s'aligne ? (si je n'applique le vertical-align que sur le span, il ne se met pas au centre)
Sujet clos
Aller à