Centrer le contenu d'un conteneur entre 2 autres conteneurs

**niavlys77** · 21/04/2009, 15h08

Bonjour,

Depuis ce matin je tatillonne sur mon problème sans succès alors je viens vous l'exposer. Mon conteneur (A) de taille fixe, contient 3 conteneurs (B) (C) (D) de taille variable. La condition c'est que (B) doit être tout à gauche et (D) tout à droite et que le contenu de (C) (du texte) doit être centré. Or j'ai beau tourner mon code dans tous les sens, le contenu de (C) reste obstinément à gauche comme indiqué sur le schéma.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
|=========================================|
|                  A                      |
|  ----  |------------------------|  ---- |
|  |  |  |                        |  |  | |
|  |B |  |    C                   |  |B | |
|  |  |  |                        |  |  | |
|  ----  |------------------------|  ---- |
|                                         |
|=========================================|

Voici mon code fautif.

HTML

Code :

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

1
2
3
4
5
6
 
		<div id="A">		
			<div id="B"><img src="chat.png"/>chat</div>
			<div id="C">Minouchette</div>
			<div id="D">siamois</div>
		</div>

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
#A
{
	background-color: rgb(223,238,253);
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border: 2px solid rgb(12,88,165);  
       width: 850px;
	height: 27px;
	float: right;
	font-size: x-large;
	font-weight: bold;
	text-align: center;
}
 
#B
{
	background-color: white;
	float: left;
	padding-left: 5px;
	padding-right: 5px;
	Border-right: 2px solid rgb(12,88,165);
	width: auto;
 
}
 
#C
{
	Float: left;
	width: auto;
	text-align: center;
}
 
#D
{
	background-color: white;
	float: right;
	padding-left: 5px;
	padding-right: 5px;
	Border-left: 2px solid rgb(12,88,165);
	width: auto;
}

Donc, pour résumer, ma question est : Comment réussir à centrer le contenu de C sachant que B et D pourront être de tailles différentes ?

Merci par avance de vos éclaircissements...

**Macmillenium** · 21/04/2009, 15h18

Bonjour,

Les éléments dotés d'un float:left s'adaptent à la largeur de leurs contenus (inutile d'indiquer un width:auto).
Pour que cela fonctionne, il faudrait renseigner les width.

**Attrox** · 21/04/2009, 15h19

tu a essayer text-align:center; dans div A sa aligne aussi les div.

**Poulpynette** · 21/04/2009, 15h26

Envoyé par Attrox

tu a essayer text-align:center; dans div A sa aligne aussi les div.

Oui mais pas le contenu des div B, C et D si je ne m'abuse, donc pas très utile ici.

**niavlys77** · 21/04/2009, 15h36

Envoyé par Macmillenium

Bonjour,

Les éléments dotés d'un float:left s'adaptent à la largeur de leurs contenus (inutile d'indiquer un width:auto).
Pour que cela fonctionne, il faudrait renseigner les width.

Le problème de renseigner les width, c'est que la largeur ne sera plus adaptée au contenu du texte. Je souhaiterai que le contenu de C soit centrer selon la taille de C qui est déterminée par la taille variable des conteneurs B et D...

**devyan** · 21/04/2009, 15h39

Essaye en enlevant simplement "Float" sur C...

Ca devrait suffire.

**niavlys77** · 21/04/2009, 15h53

Envoyé par devyan

Essaye en enlevant simplement "Float" sur C...

Ca devrait suffire.

J'avais déjà essayé... Effectivement le contenu de C est bien centré dans C, mais mon conteneur D est parti en vadrouille sur la ligne du dessous

**Macmillenium** · 21/04/2009, 15h55

Envoyé par niavlys77

Je souhaiterai que le contenu de C soit centrer selon la taille de C qui est déterminée par la taille variable des conteneurs B et D...

Ce n'est pas logique étant donné que A à une largeur fixe.

**niavlys77** · 21/04/2009, 16h03

Envoyé par Macmillenium

Ce n'est pas logique étant donné que A à une largeur fixe.

Oui, A a une largeur fixe, mais je m'assure que les longueurs B+C+D < longeur de A. A moins qu'on ne puisse mettre de conteneur de taille variable dans un conteneur à taille fixe...

**Macmillenium** · 21/04/2009, 16h05

Si tu le dis ...
Dans ce cas :
- Tu mets C en display:inline-block (display:inline + zoom:1 pour IE7- entre commentaires conditionnelles)
- Tu ajoutes un text-align:center; sur le conteneur A
- Tu mets D en float:right;

**devyan** · 21/04/2009, 16h14

A a une largeur fixe.
C est dans le flux de A et fait par défaut toute la largeur (il me semble)
B et D étant flottants le contenu de C va venir "s'enrouler" autour...

Donc c'est tout à fait normal d'après moi.

Edit : cependant attention au fait que A peut avoir une hauteur inférieure à celle de B et D (A a une hauteur fixe)

**Macmillenium** · 21/04/2009, 16h18

Envoyé par devyan

C est dans le flux de A et fait par défaut toute la largeur (il me semble)
B et D étant flottants le contenu de C va venir "s'enrouler" autour...

C'est bien ça le problème, C est dans le flux donc D passera en dessous

A part "A", aucune largeur n'est renseigné !

**devyan** · 21/04/2009, 16h20

Envoyé par Macmillenium

C'est bien ça le problème, C est dans le flux donc D passera en dessous

Exact, il faut que D soit placé avant C dans le source Html.

**Macmillenium** · 21/04/2009, 16h23

Oui mais bon, dans tous les cas, le contenu va déborder à droite et à gauche ...
@niavlys77 : Il faudrait au moins renseigner le width de B et D

**Candygirl** · 21/04/2009, 16h36

Si b et d sont de tailles variables et que c doit occuper le reste de l'espace entre 2, comme dit plus haut tu peux inverser l'ordre de c et d dans le html et ajouter une propriété conférant un nouveau contexte de formatage à c, par exemple:overflow:hidden;

Code css :

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

1
2
3
4
5
6
#C
{
	overflow:hidden;
	text-align: center;
	background-color:green;
}

Code html :

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

1
2
3
4
5
<div id="A">		
			<div id="B"><img src="chat.png"/>chat</div>
			<div id="D">siamois</div>			
			<div id="C">Minouchette</div>
</div>

(Ne pas oublier de doter #c du layout pour IE6)

**devyan** · 21/04/2009, 16h39

Envoyé par Macmillenium

Oui mais bon, dans tous les cas, le contenu va déborder à droite et à gauche ...
@niavlys77 : Il faudrait au moins renseigner le width de B et D

Non impossible... Ils sont alignés sur les bord et s'agrandissent donc vers le centre.
Le seul problème peut être de la somme des largeurs de B et D dépassent celle de A et dans ce cas ils se retrouveraient l'un sous l'autre.

**Candygirl** · 21/04/2009, 16h43

Envoyé par devyan

Non impossible... Ils sont alignés sur les bord et s'agrandissent donc vers le centre.
Le seul problème peut être de la somme des largeurs de B et D dépassent celle de A et dans ce cas ils se retrouveraient l'un sous l'autre.

Ben disons que si le contenu de C est plus haut que B et/ou D il viendra s'étendre au-dessous de ces derniers pour occuper tous l'espace à disposition en largeur, d'où ma proposition d'un nouveau contexte de formatage sur C pour le prévenir

**devyan** · 21/04/2009, 16h45

Envoyé par Candygirl

Ben disons que si le contenu de C est plus haut que B et/ou D son contenu viendra s'étendre au-dessous de ces derniers pour occuper tous l'espace à disposition en largeur, d'où ma proposition d'un nouveau contexte de formatage sur C pour le prévenir

Tu veux dire sur A pas sur C alors...

C'est A le conteneur.

**Candygirl** · 21/04/2009, 16h46

Envoyé par devyan

Tu veux dire sur A pas sur C alors...

Non, non, sur C

**devyan** · 21/04/2009, 16h49

Envoyé par niavlys77

Code :

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

1
2
3
4
5
6
7
8
9
10
 
|=========================================|
|                  A                      |
|  ----  |------------------------|  ---- |
|  |  |  |                        |  |  | |
|  |B |  |    C                   |  |D | |
|  |  |  |                        |  |  | |
|  ----  |------------------------|  ---- |
|                                         |
|=========================================|

...

Donc, pour résumer, ma question est : Comment réussir à centrer le contenu de C sachant que B et D pourront être de tailles différentes ?

je viens de voir ceci... Donc nous n'avons répondu qu'à une partie du problème...

C doit toujours être au centre de A ?