28172 sujets

CSS et mise en forme, CSS3

Alignement vertical Titre et Slogan

Bonjour,

J'ai besoin de toutes vos lumières, s'il vous plait, pour un truc assez basic !

Comme vous pouvez le constater, j'ai une image, à gauche de mon header et je voudrais que le titre et le slogan soit centré verticalement, tous les deux... mais ça marche pas.

J'ai aussi essayé de mettre le slogan dans le H1 en l'intégrant dans un span mais ça marche pas mieux.

Merci.

Mon code HTML :

<body>

<div id="header">

	<img src="pole.jpg" alt="image" />
	
	<div id="logo">
		<h1>Titre</h1>
		<p>slogan</p>
	</div>
	
</div>


Mon code CSS :

*{
	margin: 0;
	padding: 0;
}


#header{
	margin: 0 auto;
	width: 100%;
	height: 179px;
	background-color: green;
}

img{
	float: left;
}

#logo{
	width: 378px;
	height: 179px;
	line-height: 179px;
	float: left;
	text-align: center;
}

h1{
	background-color: grey;
}

p{
	background-color: red;
}
Iop,

Pour compléter ce que dis mon collègue Jm, avant de d'utiliser text-align center il faut que tes bloques soit en inline (car cette valeurs ne fonctionne pas avec un élément de type bloque). Donc en somme, la synthaxe complète serait :
h1, #logo p{display: inline-block; 
text-align:center;}


En espérant t'avoir fourni la solution Smiley smile
Oui, mais le problème avec cette technique c'est que le slogan ne se trouve plus sous le titre, moi je voudrais centrer verticalement le titre et le slogan, mais que le slogan reste sous le titre.

Merci quand même pour vos réponses...
Avec la solution donner précédemment si tu ajoutes un br entres les deux éléments tu as le résultat que tu souhaites (visuellement) histoire de bien comprendre ce que tu souhaites ?
Modifié par Gili (20 Feb 2012 - 22:55)
non c'est pas ça, centrage vertical d'un élément de type bloc.

Tu sais en utilisant les propriétés:

genre pour un H1, ça aligne le texte du H1 verticalement, ça ça fonctionne, mais si je veux que le slogan soit pris en compte dans cette alignement vertical, ben là je sais pas.

height: 100px;
line-height: 100px;
#logo h1, #logo p {
display: table-row;
vertical-align: center;
}


Que dis-tu de ça ? Smiley langue
Modifié par Gili (20 Feb 2012 - 22:58)
Ben je dis que le mieux, si veux me proposer des bouts de code, c'est que tu crées une div avec un titre et slogan et test ton bout de code et tu me dira si ce que tu me proposes fonctionne.
Mais je ne crois pas. Smiley langue
Modifié par novax (20 Feb 2012 - 23:09)
Imaginons que je mettes mon slogan dans mon H1:

<h1>Titre<span>slogan</span></h1>

Comment je peux centrer ça verticalement et que le slogan soit sous le titre...?
Ahhh tester le code, en voilà une bonne idée mdr.

J'ai trouvé un solution mais à base de <br>
		<h1>Titre</h1>
<br>
		<p>slogan</p>


#logo {
    display: table-cell;
    vertical-align: middle;
}


La valeur de vertical-align doit être middle et non center, je me suis trompé Smiley langue

Edit : une solution plus élégante doit être possible, peut être trouveras-tu un élément de réponse ici
Modifié par Gili (20 Feb 2012 - 23:22)
Sujet clos
Aller à