Centrer un div dans un autre div
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 8-):
Code:
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:
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 :calim2:
