colonnes factices : centrer verticalement les DIV
Bonjour,
dans un autre Post, vous m'avez aidé à créer 3 blocs côte à côte, de meme hauteur, c'est à dire 3 colonnes factices car les bordures sont 'simulées' par une image :
Citation:
Envoyé par
sebhm
Code:
1
2
3
4
5
6
7
8
| <div id="conteneur">
<div id="bloc1">BLOC1</div>
<img id="separ1" src="img/brdc.png" alt="séparation" />
<div id="bloc2">BLOC2<br />BLOC2</div>
<img id="separ2" src="img/brdc.png" alt="séparation" />
<div id="bloc3">BLOC3</div>
<hr class="antifloat" />
</div> |
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| div#conteneur {
position : relative;
margin : 0;
padding : 0;
border : 1px solid black;
}
div#bloc1 {
margin : 0 ;
width : 20%;
float : left;
}
div#bloc2 {
margin : 0 ;
float : left;
width : 22%;
border : 1px solid black;
}
div#bloc3 {
margin : 0 ;
margin-left : 52%;
border : 1px solid black;
width : 22%;
}
hr.antifloat {
visibility : hidden;
clear : both;
}
#separ1 {
position : absolute;
top : 0;
left : 20%;
width : 4px;
height : 100%;
}
#separ2 {
position : absolute;
top : 0;
left : 52%;
width : 4px;
height : 100%;
} |
le CLEAR est nécessaire pour que le bloc 'conteneur' ait la bonne hauteur.
je voudrais maintenant centrer verticalement le contenu de chacune de mes colonnes
(la colonne la plus haute ne va pas bouger car c'est elle qui détermine la hauteur de mes autre colonnes, mais je voudrais centrer verticalement le texte qu'il y a dans les 2 autres).
Ce n'est pas évident car mes colonnes n'ont en fait pas la meme hauteur. Si une colonne ne contient qu'une seule ligne, sa hauteur = une ligne.
Pour le constater, il faut modifier le CSS en ajoutant une bordure par exemple autour du bloc 1:
Code:
1
2
3
4
5
6
| div#bloc1 {
margin : 0 ;
width : 20%;
float : left;
border : 1px solid red;
} |
Donc, je ne pense pas qu'il faille centrer verticalement le contenu de chaque bloc mais plutot centrer verticalement le bloc lui meme dans le 'conteneur'
(je pense mais je peux me tromper...)
j'ai essayé de modifier les propriétés d'affichage de mon bloc 'conteneur' en faisant :
Code:
1
2
3
4
5
6
7
8
9
| div#conteneur {
position : relative;
margin : 0;
padding : 0;
border : 1px solid black;
display:table-cell;
vertical-align:middle;
} |
ce qui aurait du faire basculer le mode d'affichage du bloc conteneur en 'mode Table', ce qui permettrait de centrer verticalement le contenu...
Ca ne marche pas et pire, ca explose mon affichage...
une idée ??
merci
