28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Centrage vertical sans line-height

Bonjour à tous Smiley smile
J'ai une div accueil qui contient du texte que je voudrais centré horizontalement et verticalement... j'ai lu quelques tutos, notamment sur ce site et j'ai essayé de le centré avec la propriété vertical-align:middle; ainsi qu'en ajoutant une line-height:300px et une height:300px mais avec cette fonction si on réduit ma page le texte s'en va 300px plus bas (normal la propriété line-height est faite pour espacé le texte Smiley lol )
J'ai ensuite essayé avec margin: auto mais ça ne fonctionne pas Smiley decu
Si vous pouviez me filer un coup de main...

Mon HTML:
<div id="Accueil">
	<p id="Welcome"><h1>- DEVELOPPEMENT WEB - SECURITE INFORMATIQUE -</h1></p>
</div><!--Accueil-->


Mon CSS:

#Accueil{
font-size: 20px;
margin-top: 100px;
text-align: center;
height: 300px;
line-height:50px;
text-align:center;
border: solid red 2px;
margin-right: auto;
margin-left: auto;
}

Modifié par SnowH52 (15 Apr 2015 - 12:10)
Modérateur
Salut,

Tu est passé par ce tuto ? http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html

Il y a plusieurs solutions... tout est expliqué ya plus qu'a appliquer... (et il faut bien lire avant de copier coller).
Par exemple pour le line height il faut repasser le line-height de l'enfant à "normal"
Centrer verticalement plusieurs lignes de texte dans un conteneur de hauteur fixe a écrit :

line-height:normal; /* on rétablit le line-height */


Smiley smile

PS : #accueil c'est ton conteneur et #cours c'est ce que tu veux centrer ? #accueil n'apparait pas dans ton HTML et #cours n'a pas de style Smiley biggol
Salut!
Merci pour le tutos, je n'étais pas tomber sur celui là
Sinon je me suis planté de partie HTML... je la changerai ce soir, je n'ai pas accès à mes données
Re salut et désolé du retard...
J'ai modifié ma partie HTML dans mon premier message

J'ai lu le tuto que tu m'as donné mais ça ne réponds pas à ma question...
Il utilise des line-height, et donc quand on réduit la page le texte dégage 300 px plus bas
Une solution serait overflow: hidden mais le problème c'est que si on réduit trop la page on ne voit plus rien de ce que je voulais afficher
Bref... si j'ai manqué une étape n'hésitez pas Smiley cligne
Modérateur
Salut,

Bon, reprenons du début alors.
En solution 1 j'ai épuré un peu le html avec juste un h1, un peu de pagging et hop le tour est joué. (as-tu vraiment besoin de tout ces blocs ?! Il y a d'autres choses sur ta page ? les 300px c'est au pif ou c'est pile ce qu'il faut ?).
En solution 2 pour centrer ton bloc dans un bloc ya une autre petite astuce avec le transform:translateX.
Et en solution 3 celle du line-height.

http://jsfiddle.net/Undless/L03zLjyc/1/
Bonjour tout le monde!

Merci pour vos réponses, grâce à vous j'ai réussi à faire ce que je voulais Smiley biggrin
Merci beauxoup et très bonne journée

[EDIT] est-il possible de mettre le sujet en résolu?
Modifié par SnowH52 (15 Apr 2015 - 07:37)
Sujet clos
Aller à