28173 sujets

CSS et mise en forme, CSS3

Centrer un Div de taille variable

Bonjour,

J'ai un div 'conteneur_num' qui contient les numeros (1 2 3 ...) d'une navigation page par page.
Ce div a une taille variable en fonction de la position de l'internaute.

Je cherche a centrer les numeros ds conteneur num mais je n'y arrive pas.



.conteneur_num{position: relative;width: auto;height:20px;margin-bottom: 8px;text-align:center;margin-left: auto;margin-right: auto;}


Qq'un aurait une idee comment faire (j'ai beau chercher sur le forum mais je ne trouve rien qui me permette de faire ceci)

D'avance Merci
Modifié par yobogs (29 Nov 2007 - 17:05)
A partir du moment où ton div 'conteneur_num' a un fond transparent et pas de bordure (c'est le cas ?), pourquoi ne pas lui donner une taille définie plus grande que le texte qu'il peut contenir ? Etant donné que ton texte est centré, ça reviendra au même.
Bonjour et merci pour ta réponse,

'ai oublié de préciser que mes numéros etait dans un div dont le css est :


.num_milieu{width:auto;height:18px;float:left;padding-top:0px;padding-left:1px;padding-right:1px;background: url(images/num_milieu.png);}


J'ai bien capté que mon pb était le float:left qui plaçait le flux à gauche... mais je n'arrive pas trouver par quoi le modifier...

Qq'un a une idée ?

Merci pour l'aide
Modérateur
bonsoir ,

comme je ne boude pas le display:table et qu'il n'a aucune incidence 'sémantique' , j'en profite .. je reprend l'alternative deja evoqué pour IE .



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- declaration du doctype, ici une feuille codée en xhtml -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>XHTML 1.0 Strict</title>
<style type="text/css">
.nav {
	display:table;
	margin:1em auto;
	background:lightblue;
	padding:2px;
}
.dim {
	height:80px;
}
</style>
 <!--[if IE]>
<style type="text/css">
	.page {text-align:center;}
	.nav {
	display:inline;
	zoom:1;
}
</style>
<![endif]--> 
</head>
<body>
	<div class="page" ><p class="nav"> &lt;&lt; 1 | 2 | 3 &gt;&gt; </p></div>
	<div class="page" ><p class="nav"> &lt;&lt; 1 | 2 | 3 ....<br /> 32 | 33 | 34 &gt;&gt; </p></div>
	<div class="page" ><p class="nav dim">  pages : &lt;&lt; 1 | 2 | 3 | 4 | 5 &gt;&gt; </p></div>
</body>
</html>

( test en ligne : http://gcyrillus.free.fr/essai/pagination-centree.html )

Cette façon de proceder , permet de centrer un bloc qui s'aggrandie en fonction de son contenu.

On peut le dimensionner (attention IE7 devra recevoir la regle min-width ou min-height) , IE6 laissera le contenu s'aggrandir au dela des dimension definie , les autres navigateurs aussi , du fait de la regle display:table ; qui adapte les dimensions au contenu.

Cet element peut recevoir d'autre element block ou retour a la ligne ( <br /> .

Si l'on veut , seulement , centré un texte ou element inline , alors un text-align:center suffit pas besoin de mettre ceci en oeuvre.

GC
Sujet clos
Aller à