28172 sujets

CSS et mise en forme, CSS3

Centrer verticalement une div?

Bonjour,

je suis très perplexe!

J'ai essayé le tuto ici: http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html#cv_bloc

Et autant sur la page du tuto ça marche très bien, autant avec ce code, impossible de centrer verticalement... (je teste pour l'instant avec chrome - windows)

<html>
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="jquery.min.js"></script>
		<style type="text/css">
div.conteneur {
background:#ccc;
width:200px;
height:200px;
line-height:200px;
text-align:center; /* centrage horizontal */ }

div.bloc {
width:100px; /* largeur du bloc */
padding:10px; /* aération interne du bloc */
border:1px solid #fff;
vertical-align:middle;
display:inline-block;
line-height:1.2; /* on rétablit le line-height */
text-align:left; /* ... et l'alignement du texte */ }
		</style>
	</head>
	<body>
				<div id="boite-reponse" class="conteneur">
					<div id="reponse" class="bloc">Salut bla bla bla bla bla bla bla bla bla?</div>
				</div>
	
	
	</body>
</html>



Quelqu'un peut-il voir le problème?!

Merci!
Modifié par joora (03 Jun 2012 - 19:27)
Bonsoir,

N'aurais-tu pas oublié le doctype : 
<!DOCTYPE html>
?

Cordialement!

EDIT: sorry, Niuxe, je n'avais pas vu ton post!
Modifié par lddsoft (03 Jun 2012 - 20:18)
Merci vous deux, c'est effectivement ce qui faisait la différence.

Cependant pouvez-vous m'éclairer un peu sur le pourquoi de la chose?

1) Sans doctype ou avec <!DOCTYPE xhtml>:
- le height:100% d'une div prend toute la hauteur de la fenêtre
- le line-height du conteneur ne "fonctionne" PAS pour le "hack" permettant de centrer verticalement

2) Avec <!DOCTYPE html>:
- le height:100% d'une div n'a pas d'effet, du moins pas dans les conditions de ma page.
- le line-height du conteneur "fonctionne" pour le "hack" permettant de centrer verticalement.

Pourquoi les mêmes propriétés css sont-elles interprétées différemment selon qu'on est en html ou xhtml? Comment prévoir ces effets? Je n'ai pas tout saisi...
Modifié par joora (03 Jun 2012 - 22:48)
Modérateur
C'est très simple : Sans DTD, le browser passe en mode quirk. De mémoire, l'affichage du mode quirk est l'équivalent d'un affichage IE5.
Sujet clos
Aller à