CSS : comment positionner un élément au milieu (mi-hauteur / 50% vertical) d'un autre élément ?

Question

Je suis impatient de créer une infobulle qui soit positionnée à côté de l'élément, mais au milieu de celui-ci. Il est facile de la placer au-dessus et en dessous et de la positionner au centre horizontal d'un élément. Mais existe-t-il un moyen de le faire verticalement (sur le côté droit ou gauche d'un élément, positionné verticalement au milieu de la hauteur de cet élément) ?

Dans mon cas, la hauteur de l'élément est fixe (connue) et la hauteur de l'info-bulle ne l'est pas, car elle peut contenir divers contenus textuels. Et une info-bulle peut être un enfant de l'élément.

Cependant, je suis également curieux de savoir comment procéder lorsque les deux hauteurs ne sont pas fixes (inconnues et pouvant varier en fonction du contenu). Par hauteurs, j'entends la hauteur de l'élément et de l'infobulle. La largeur peut être connue et fixe.

Answer 1

C'est un peu tard mais j'ai essayé de faire un exemple sur codepen qui montre un exemple fonctionnel si j'ai bien compris votre question.

http://codepen.io/trgraglia/pen/RWbKyj

Utilisez la transformation CSS.

Par exemple, transform:translateX(-50%); Un élément sera déplacé vers la gauche de 50% de son propre poids. Vous pouvez maintenant l'aligner sur le parent avec position y bottom o top o left o right et ensuite le déplacer par les dimensions de lui-même.

J'espère que cela vous aidera !

Answer 2

En utilisant CSS & jQuery-

CSS

.div{
    top:50%
}

jQuery

var divheight = $(.div).height() / 2;
$(.div).attr('style','margin-top:-'+divheight+'px;');

Answer 3

Si vous ne connaissez pas les deux hauteurs, il n'y a que deux possibilités :

1. Définir le parent display: table et les enfants display: table-cell y vertical-align: middle .
2. Utilisation de CSS3 Flexbox : http://www.w3.org/TR/css3-flexbox/ mais avec un support limité pour les navigateurs : http://caniuse.com/#search=flexbox

Si ce sujet vous intéresse, vous trouverez ici un bon article avec plus de conseils : http://www.vanseodesign.com/css/vertical-centering/

Comme vous pouvez le constater, la seule façon d'aligner verticalement un élément sans connaître sa hauteur et sans utiliser CSS3 est d'utiliser display: table-cell .

Answer 4

Si vous connaissez la hauteur du contenu, le moyen le plus simple de centrer l'infobulle est de définir la valeur de l'attribut line-height Vous pouvez voir comment je l'ai fait ici. jsFiddle