Centrage vertical avec bootstrap
Bonjour à tous
J'ai un intranet a refaire; c'est une mise en page tableau et je voudrais plus moderne et refaire entièrement le look.
Pour me mâcher le travail j'ai retenu Bootstrap qui me parait excellent.
Las, dès la page d’accueil et le login j'ai un souci de centrage vertical et je n'arrive pas à le résoudre: j'ai passé 3h hier et 2 h aujourd'hui en vain. Toutes les explication que j'ai trouvé sur internet renvoient à la propriété css 'vertical-align: middle', avec des variantes sur le display. J'ai essayé des dizaines de combinaisons rien ne fonctionne. J'ai essayé le 'margin:auto' aussi tout ce que j'obtiens c'est un centrage horizontal et mes éléments reste désespérément collés en haut.
Voilà la page de test que j'utilise:
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
| <!DOCTYPE html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, width=device-width">
<meta charset="utf-8">
<title>Connexion</title>
<link rel="stylesheet" href="http://localhost/e-fDemo/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="http://localhost/e-fDemo/css/global.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="row" id="background">
<div class="row" id="banner">
<div class="span2">
<a href="http://www.tcl-ea.com" target="blank"><img src="http://localhost/e-fDemo/images/logos/logo_tcl.png" title="Déconnexion"></a>
</div>
<div class="span2">
<img src='http://localhost/e-fDemo/images/logo_une.png' id="logo_une"> </div>
<div class="span4">
<h1 id="siteName">e-F Demonstration - TCL</h1>
</div>
<div class="span4" id="statusPanel">
Non connecté : <a href="http://localhost/e-fDemo/index.php/accueil/login">Se connecter</a> </div>
</div>
<div class="row">
<div class="span12">
<a href="http://localhost/e-fDemo/index.php/accueil/accueil_home">Accueil</a>
</div>
</div>
<div class="row">
<div class="span12">
<h2 id="pageName">Connexion</h2>
</div>
</div>
</div><!-- fin background-->
</div><!-- fin container -->
</body>
</html> |
Voici le global.css que j'ajoute à Bootstrap (nota j'ai recompilé Bootstrap pour avoir une largeur de span de 80 et donc une largeur totale de 1200, avec 10px de marge sur mon id #background
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
| /*
Document : global
Created on : 30 mars 2013, 22:49:09
Author : jean
Description:
reprise des anciens id et class css utiles
*/
#background{
background-color: lightgreen;
margin: 10px;
padding: 10px;
width: 1200px;
height: 800px;
/*(80*12)+(11*20)+(2*10) */
border-radius: 10px 10px 10px 10px;
}
h1{
font-size: 24px;
}
#banner{
height: 100px;
}
#logo_une{
display: table-cell;
vertical-align: middle;
} |
Comme vous pouvez le voir, j'ai fixé la hauteur de la banner à 100px, en me disant que j'arriverais mieux à positionner; ça n'a rien changer.
Ensuite, j'ai un logo variable, il peut être en format horizontal ou vertical. Je calibrerais mes logos pour qu'ils prennent toute la hauteur.
Cela se gâte après avec le logo_une qui a une hauteur de 35px et une longueur de 166.
Et puis toute la suite bien sur (titre h1, informations de connexion qui devient une table quand on est connecté).
Le seul moyen que j'ai trouvé pour positionner mes éléments c'est de leur coller un margin-top. Cela ne me satisfait pas car il va falloir que je calcule chaque fois que je rencontrerais le problème ça va me pourrir la vie tout au long du projet, et puis j'aimerais comprendre.
Car si je regarde les propriété css de la balise img du Bootstrap noous avons:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| img {
/* Responsive images (ensure images don't scale beyond their parents) */
max-width: 100%;
/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
height: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
} |
Pourquoi ça ne fonctionne pas non plus?
Merci de votre aide je désespère là.
