web-dev-qa-db-fra.com

Alignement vertical de SVG en CSS

J'ai un problème avec l'alignement SVG en ligne. J'ai créé un bouton avec du texte et un SVG. Et tandis que l'alignement fonctionne correctement lorsque le SVG est au moins aussi grand que le texte, il échoue lorsque la hauteur du SVG est plus petite que le texte.

J'ai créé un cas de test avec un bouton d'arrière-plan bicolore pour indiquer exactement où se trouve le milieu. Vous pouvez voir si vous regardez de plus près que le deuxième cas n'est pas parfaitement aligné car la hauteur du SVG est inférieure à celle du texte.

Y a-t-il un moyen de réparer ceci? Le faire d'une autre manière (pas de js s'il vous plait)?

Cas de test: https://goo.gl/KYDKGH

htmlcsssvgalignmentvertical-alignment
13
MyWetSocks

jsfiddle 1 - Vous pouvez utiliser position:relative sur le conteneur et position:absolute sur des objets comme celui-ci:

  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;

Le top: 50% déplace l'objet vers le centre vertical du conteneur en sélectionnant le haut de l'objet comme référence (pas son centre), donc le transform: translateY le déplace d'une distance de 50% de sa taille vers le haut pour le laisser exactement au milieu du conteneur (par le centre des objets).

ps: le text-align:center;left:0;right:0; et margin:auto sont pour l'alignement horizontal.

jsfiddle 2 - Ou utilisez display:flex sur le conteneur avec align-items pour aligner verticalement le contenu comme ceci:

  display: -webkit-flex; /* Safari */  
  display: flex;
  -webkit-align-items: center; /* Safari 7.0+ */
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;

ps: le justify content est pour l'alignement horizontal.

28
Le____