28172 sujets

CSS et mise en forme, CSS3

Centrer une div dont on ne connait pas la taille

Bonjour à tous

je voudrais savoir comment je pourrais faire pour centrer une div dont je ne connait pas la taille.

Voilà mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<style type='text/css'>
		<!--
		/* CSS Document */
		div#bottom
		{
			 width:100%;
			 position : absolute;
			 bottom : 0px;
			 left : 0px;
			 height : 50px;
		}
		div#footer 
		{
			 height:20px;
			 width:100%;
			 margin:0;
			 text-align: center;
			 vertical-align: middle;
			 background-color : olive;
		 }
		div#footer div#div_footer_all
		{
			float : left;
			 background-color : red;
			 text-align: center;
		}
		div#footer div#div_footer_all div
		{
			 float : left;
			 height : 100%;
			 padding : 0px 10px 0px 10px;
			 vertical-align: middle;
		}
		div#footer div#div_footer_all div.separation
		{
			 width:12px;
			 height:100%;
		}
		//-->
		</style>
	</head>
	<body>
		<div id="bottom" align="center">
			<div id="footer">
				<div id="div_footer_all" align="center">
					<div id="aide">Aide</div>
					<div class="separation">-</div>
					<div id="faq">FAQ</div>
					<div class="separation">-</div>
					<div id="conditions_generales_vente">Conditions générales de ventes</div>
					<div class="separation">-</div>
					<div id="presse">Presse</div>
					<div class="separation">-</div>
					<div id="partenariats">Partenariats</div>
					<div class="separation">-</div>
					<div id="qui_sommes_nous">Qui sommes nous ?</div>
				</div>
			</div>
		</div>
	</body>
</html>


je voudrais centrer la div en rouge

merci à vous

PoichOU
quelqu'un peut me dire si ma question est bête ou mal posée ? ou alors si effectivement il n'y a pas de solution à ce problème (ce qui m'étonnerai quand même) ?

Merci


Smiley bawling Smiley bawling please help me ...
PoichOU a écrit :
quelqu'un peut me dire si ma question est bête ou mal posée ?

Bête, non. Mal posée, ça se pourrait. Par exemple, tu demandes à réaliser une chose précise alors que ça n'est pas forcément un bon choix d'intégration. À vue de nez, je dirais que passer par un peu de display: inline serait encore la solution la plus simple, et alors exit la question sur le centrage horizontal d'un bloc de largeur inconnue.

Bien sûr si tu as fait de la rétention d'information (en planquant des bouts de code, ou en oubliant de nous donner un aperçu visuel du rendu à obtenir Smiley cligne ), cette solution peut ne pas coller.

PoichOU a écrit :
ou alors si effectivement il n'y a pas de solution à ce problème (ce qui m'étonnerai quand même) ?

Si on reste sur le centrage horizontal d'un bloc de largeur inconnue, les solutions sont:
- display: inline-block;
- display: table;
- <table>.

Seule la troisième ne pose pas de problème de compatibilité important.
Merci de ta réponse Florent.

Ok je vais préciser ma demande.

En fait je voudrais faire un bas de page classique du genre celui sur http://www.alsacreations.com (Haut de page - Politique d'accessibilité - Conception : Alsacréations.fr - Hébergement : Nikozen- Mentions légales- Admin). Je voudrais que ce "footer" soit centré en bas de la page.

De plus, je voudrais que ce "footer" soit dynamique c'est à dire qu'il puisse y avoir un lien supplémentaire ou que le texte change sans que cela impact la mise en forme.

J'ai testé le display:inline sur les balises <div> et ça me permet d'éviter les float:left mais je ne vois comment en quoi ça peut jouer sur le fait de centrer le conteneur. Peux-tu m'éclairer ?

Tu me conseilles de faire ça avec une <table> ?

PoichOU
Sujet clos
Aller à