Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» Alignement vertical Titre et Slogan
Auteur
novax
#
Citer
6 Posts
 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;
}
^
jmlapam
#
Citer
Bazinga !
2148 Posts
 Salut,

Essaie plutôt ceci:

h1, #logo p{text-align:center;}

Don't <li> !
http://jmperso.eu 
^
novax
#
Citer
6 Posts
 Je ne vois pas vraiment en quoi ça change quelque chose...
^
jmlapam
#
Citer
Bazinga !
2148 Posts
 Bah text-align c'est pour spécifier l'alignement d'un texte dans une div.
Don't <li> !
http://jmperso.eu 
^
Gili
#
Citer
432 Posts
 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 smile
N'importe quoi, n'importe quand, n'importe où, et sans la moindre raison.
http://www.nicolasgilis.be 
^
novax
#
Citer
6 Posts
 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...
^
Gili
#
Citer
432 Posts
 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)
N'importe quoi, n'importe quand, n'importe où, et sans la moindre raison.
http://www.nicolasgilis.be 
^
novax
#
Citer
6 Posts
 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;
^
Gili
#
Citer
432 Posts
 
#logo h1, #logo p {
display: table-row;
vertical-align: center;
}


Que dis-tu de ça ? langue
Modifié par Gili (20 Feb 2012 - 22:58)
N'importe quoi, n'importe quand, n'importe où, et sans la moindre raison.
http://www.nicolasgilis.be 
^
novax
#
Citer
6 Posts
 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. langue
Modifié par novax (20 Feb 2012 - 23:09)
^
novax
#
Citer
6 Posts
 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...?
^
Gili
#
Citer
432 Posts
 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é 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)
N'importe quoi, n'importe quand, n'importe où, et sans la moindre raison.
http://www.nicolasgilis.be 
^
Prévenir un modérateur
Répondre au sujet
Aller à