Partage

[bootstrap] Centrer verticalement

Mais comment diable fait on ça?! :o

10 août 2015 à 17:20:16

Bonjour,

Voilà, ça fait des heures que je cherche comment faire un truc pourtant si simple... Je cherche à faire avec bootstrap quelque chose du style :

<table style="vertical-align: middle; text-align: center;">
    <tr>
        <td rowspan="2"><img src="img1.png" /></td>
        <td><img src="img2.png" /></td>
        <td><img src="img3.png" /></td>
    </tr>
    <tr>
        <td><img src="img4.png" /></td>
        <td><img src="img5.png" /></td>
    </tr>
</table>

Voilà le code que j'obtient avec bootstrap :

<div class="row">
    <div class="col-md-4">
        <img src="img1.png" />
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-sm-6">
                <img src="img2.png" />
            </div>
            <div class="col-sm-6">
                <img src="img3.png" />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <img src="img3.png" />
            </div>
            <div class="col-sm-6">
                <img src="img4.png" />
            </div>
        </div>
    </div>
</div>

Sauf qu'avec bootstrap, mon img1 reste tout en haut :'(

Bien sur je pourais jouer avec le line-height mais par defaut, je ne sait pas combien de px fera mon image (oui oui, elle est défini en % mon image :/ )

Si quelqu'un a une idée...

Merci d'avance :D


-
Edité par jam-jam68140 10 août 2015 à 17:24:45

15 août 2015 à 2:07:58

Petit up

svp j'ai besoin de vous là... J'ai fais un code avec jquery en attendant mais ça donne des cochonstés une fois sur quatre... :(

-
Edité par jam-jam68140 15 août 2015 à 2:08:22

15 août 2015 à 15:32:12

En jQuery, tu peux facilement récupérer la hauteur de ton image.

Donc dans le CSS, tu positionne en relative a top:50%. Ensuite, tu peux grâce a jquery récupérer la hauteur de l'image grâce a : var hauteurImg = $("#monImg").height;

Ensuite, tu écris ça : $("#monImg").css("margin-top" , hauteurImg/2*(-1));

Logiquement, ça marche.Après, y a peut être une méthode full css mais je vois pas...

-
Edité par Basmo 15 août 2015 à 16:04:13

Si vous voulez de l'aide, postez votre code.
15 août 2015 à 16:02:19

Bonjour,

Est-ce que cela marche ?

img{
    position : relative;
    top: 50%;
    transform: translateY(-50%);
}
15 août 2015 à 16:12:06

nyahor a écrit:

Bonjour,

Est-ce que cela marche ?

img{
    position : relative;
    top: 50%;
    transform: translateY(-50%);
}

Faut pas oublier les prefix :)

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-ms-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);

-
Edité par Basmo 15 août 2015 à 19:01:41

Si vous voulez de l'aide, postez votre code.
16 août 2015 à 1:13:44

Non, ça ne veut pas fonctionner... En fait je n'ai pas compris le pourquoi de ce code de toute facon :(

Et puis en jquery j'ai un code un peu plus complexe mais qui reprend vaguemet l'idée ;)

-
Edité par jam-jam68140 16 août 2015 à 1:14:24

16 août 2015 à 1:46:27

Bonsoir,

Puis ce q'un exemple est souvent plus simple et plus claire que des explications longues :

Une méthode pour centrer verticalement un élément pour lequel on connais la hauteur est la suivant :

.block{
    position: relative;
    top: 50%;
    height: 100px;
    margin-top: -50px; // height / 2
}


Ce qui équivaut à :

.block{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Cette méthode peux donc être très utile car il n'est pas nécessaire de connaitre la hauteur de l’élément.

Après si ça marche pas le js est une solution.

[bootstrap] Centrer verticalement

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown