18067 sujets

Questions générales et questions de débutants

Centrage horizontal et vertical

Bonjour,

Je souhaite centrer un texte horizontalement et verticalement dans une boite.
Cette boîte étant elle même centrée horizontalement dans ma page.

Je précise que je me limite à Firefox (2.0).

Voici mon code css :

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	margin:0;
}

div#cadre {
	width: 300px;
	height: 200px;
	border: 1px solid black;
	display: table-cell;
	vertical-align: middle;
	text-align:center;
	margin:auto;
}


et celui de ma page :
[code]
<div id="cadre">
mon texte<br />
ligne 2.
</div>

Résultat : mon texte est bien centré horizontalement et verticalement dans sa boite mais la boite n'est pas centrée dans la page.
Si j'enlève "display: table-cell;", le bloc est centré mais plus le texte de façon verticale.

Y'a-t-il une solution ?
Merci.
Modérateur
Bonjour,

oui, la solution se trouve dans un tutoriel du site.
(Toujours consulter la FAQ, les tutos et la recherche sur le forum avant de poser la question Smiley cligne )

a écrit :
Je précise que je me limite à Firefox (2.0).
arf... oui mais pas les visiteurs de ton site... A moins de se servir de méthodes propriétaires, il y a toujours moyen de rendre ton code compatible avec bien plus de navigateurs... et souvent de manière simple donc il serait préférable que tu codes aussi en fonction de ceux qui sont le plus utilisés, IE entre autres...
Bonjour,

Justement c'est identique au code de la page donc je ne comprends pas pourquoi ça ne fonctionne pas.
Je remets mon code :
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin: 0; /* pour éviter les marges */
  text-align: center; /* pour corriger le bug de centrage IE */
}

#global {
	width: 300px;
	height: 200px;
	border: 1px solid black;
	display: table-cell;
	vertical-align: middle;
	text-align:center;
	margin-left: auto;
  margin-right: auto;
}


Les différences (ajouts) sont :
	height: 200px;
	border: 1px solid black;
	display: table-cell;
	vertical-align: middle;

sachant que je souhaite centrer verticalement le contenu du bloc.

Je ne vois pas où la différence significative.
Modérateur
As-tu lu le tuto jusqu'au bout ? Smiley ohwell Ce n'est pas ainsi qu'on procède pour le centrage vertical...
Si j'utilise les marges négatives j'ai bien mon bloc-cadre centré horizontalement et verticalement.

Pour le centrage vertical du texte, mes essais ne fonctionnent pas car j'ai 2 lignes de texte, ce qui m'empêche d'utiliser "font: bold 12px/200px verdana;"
Modérateur
Les écritures ne devraient pas être déterminées en px, car non redimensionnables sous IE... Je pense que tu devrais aussi lire ces 2 tutos :

- Agrandissement de la taille des polices
- Gérer la taille du texte avec les em

Tu dois aussi prévoir plusieurs polices et une famille de polices des fois que l'utilisateur ne dispose pas de la première que tu indiques.

exemple :
font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
.. mais ça, tu sembles l'avoir fait en amont. Smiley cligne

Par la suite, il faudra diviser ta hauteur de ligne par 2.
Modifié par koala64 (17 Dec 2006 - 18:44)
Sujet clos
Aller à