Centrer un div dans un autre div

**ramkin** · 18/10/2011, 21h07

Bonjour à tous,
Je voudrais centrer horizontalement un div à l'intérieur d'un autre div. C'est du déjà vu je sais, mais là j'ai des contraintes au niveau du positionnement qui me font tourner bourrique.

Voici d'abord le code html, rien d'exceptionnel

:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
<div id="bandeau">
	<div id="image"><img src="asterix_et_obelix.gif"></div>
	<div id="texte">ASTERIX<br>et<br>OBELIX</div>
</div>
 
</body>
</html>

puis le CSS:

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
div#bandeau {
position: relative;
height:300px;
margin: auto;
border: 2px solid black;
background-color: #fffadb;
}
div#image {
position: absolute;
height:150px;
left: 5px;
z-index: 1;
}
div#texte {
position: absolute;
width: auto;
bottom: 0px;
text-align: center;
background-color: #CCCCCC;
font-size: 50px;
font-family: Comic sans MS;
border: 3px ridge brown;
padding: 3px 20px 3px 300px; 
color:black;
font-weight: bold;
margin: 0 auto; 
}

ET voici le RESULTAT

Je voudrais simplement que Astérix et le texte soit centrés, juste en horizontal, dans le bandeau jaune mais je n'y arrive pas.

Je précise que j'ai une/deux contraintes, c'est d'ailleurs ce qui me pose problème:
- le texte (div gris) doit avoir son bottom à 0, c'est-à-dire que le bas doit être aligné avec le bas du bandeau jaune.
- l'image doit rester "collée" au texte sans bien sûr mordre dessus. En gros c'est l'ensemble image + texte tel qu'il s'affiche actuellement que je veux centrer.

Si quelqu'un a une idée, parce que là, je sature

**NoSmoking** · 18/10/2011, 22h51

Bonsoir,
essaies avec cela

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
div#bandeau {
  position : relative;
  height :300px;
  margin : auto;
  border : 2px solid black;
  background-color : #fffadb;
}
 
div#image {
  position : absolute;
  height : 300px;      /* correction largeur */
  width : 50%;         /* ajout moitie conteneur */
  top : 0;             /* position en haut */
  left : 0;            /* et a gauche */
  text-align : right;  /* force image sur la droite */
  z-index : 1;
}
 
div#texte{
  color : black;
  font-size : 50px;
  font-family : Comic sans MS;
  font-weight : bold;
  text-align : center;
 
  background-color : #CCCCCC;
  border : 3px ridge brown;
 
  position : absolute;
  width : auto;
  bottom : 0px;
  left : 50%;            /* decalage dans la partie droite */
  padding: 3px 20px 3px 300px;
  margin-left : -300px;  /* decalage du padding left */
}

voir les commentaires inside, il y a sûrement d'autres méthodes

**ramkin** · 19/10/2011, 11h11

Ouaaou!!

Impressionné je suis! On m'avait déjà conseillé de jouer avec des marges négatives, mais j'avoue ne pas tout bien comprendre l'idée. Ca me semble être la bonne voie, merci pour le déblocage!!

Une dernière petite chose. Ceci s'inscrit dans un projet plus global. Je te mets un exemple ICI
(Clique à gauche pour changer de série.)

Le texte n'est pas toujours de la même longueur, et l'image non-plus (encore que ça ça peut se régler s'il le faut).

Il y a donc parfois un décalage du texte qui n'est plus centré (Les mystérieuses citées d'or), ou bien un problème avec l'image qui ne se place pas bien dans son "espace alloué" (Tom Sawyer).

Ce n'est pas grand chose, je pinaille un peu

, mais si tu as quelques conseils éventuellement...

**oceane751** · 19/10/2011, 18h03

sous ie 9, le texte est derrière l'image...
cf la PJ

**ramkin** · 19/10/2011, 18h56

Envoyé par oceane751

sous ie 9, le texte est derrière l'image...
cf la PJ

Ah oui j'oubliais de préciser que tout ça est fait pour Firefox...

**NoSmoking** · 19/10/2011, 22h34

Envoyé par ramkin

Ah oui j'oubliais de préciser que tout ça est fait pour Firefox...

c'est une erreur, cela devrait être compatible.

- Pour Tom Sawyer, l'image est plus large que les autres donc l'effet ne peut être le même, dans ce genre de mise en page il est important de "formater" ce qu'on manipule.

- Pour Les mystérieuses citées d'or, cela devrait être Les<br>mystérieuses<br> citées d'or.

PS : pas IE9 pour tester

Centrer un div dans un autre div

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager