Encore un problème de centrage!

**Cynthia.** · 24/08/2010, 18h59

Bonjour,

J'ai un souci avec un tableau (sans hauteur ni largeur spécifiées) placé dans un DIV conteneur.

Je souhaite que le tableau et son contenu élargissent le DIV qui les contient, sachant par ailleurs que le contenu du tableau va également varié et que je ne peux savoir à l'avance ses dimensions (je vais remplir avec de l'ASP). Pour cela je mets mon DIV en position:absolute.

Le problème étant que je souhaite centrer horizontalement le DIV conteneur sur la page, et que pour cela le position:absolute est bloquant, de même que l'utilisation des margin:auto associé à une width spécifiée (je ne peux pas spécifier la width sinon mon DIV perd son élasticité et ne s'adapte plus au contenu, cad le tableau).

Je suis bloquée

Qu'est ce que vous me conseillez? Merci d'avance pour votre aide!

**ornitho13** · 24/08/2010, 19h35

Salut

sur le div met au niveau CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
margin:0 auto;
display:inline;

à tester

**Cynthia.** · 25/08/2010, 14h00

Je viens d'essayer ta solution Ornitho et malheureusement ça ne marche pas: le tout reste collé en haut à gauche de la page, le tableau est visible mais les bords du DIV qui le contient se résument à deux traits fins verticaux - un au dessus et un au dessous du tableau.

Ca devrait pas être si compliqué que ça de centrer un objet tout en le rendant élastique à son contenu non?

**ornitho13** · 25/08/2010, 14h46

A priori je vois pas trop, le mieux serait de centrer l'intérieur de ta div. Celle ci ne sera pas adapté à ton tableau mais au moins ton tableau sera toujours centrer et s'adptera en fonction de son contenu...

Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
table{
	margin: 0 auto;
	background:#eee;
}
</style>
</head>
<body>
<div>
	<table>
		<tr>
			<td>dgdgdfgdfgdg</td>
		</tr>
	</table>
</div>
</body>
</html>

**dragonno** · 28/08/2010, 23h53

Je sais pas si c'est ce que tu veux faire mais le contenu du div je lui donnerais :
width:100%;

Ainsi il aurait son élasticité par rapport au div.

Quand au div, pour le centrer je donnerais une marge égale en % (exemple 20%) à gauche et à droite du div :

margin-left:20%;
margin-right:20%;

Teste voir et dis-moi si ça marche

**Mahefasoa** · 30/08/2010, 09h53

Bonjour,

Comme tu connais la dimension du tableau par son contenu et si tu connais la dimension (largeur : width) du div, la solution suivante permet de centrer horizontalement un bloc en position absolute:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
div {
width: [la largeur du div]px;
left: 50%;
margin-left: -[la largeur du div]/2px;
}

Cette méthode n'est valable que si la largeur du div est connue.

Bien cordialement,

Encore un problème de centrage!

CSS

Vue hybride

Discussions similaires

Partager

Partager