Définir la hauteur de la ligne en pourcentage par rapport à l'élément parent

J'ai un élément sensible où c'est la largeur et la hauteur seront à la fois à l'échelle. À l'intérieur de ce que j'ai un texte qui je veux centrer verticalement.

Comment puis-je définir le texte du line-height être la même que celle du parent si je ne connais pas les parents de la hauteur?

line-height: 100% est relative à la police de la hauteur normale, donc ça n'aide pas...

n'est-ce pas le em type d'unité utilisé pour ces cas?
Je doute que vous pouvez obtenir sans JS
Hélas, em uniquement échelle relativement à la taille de police, pas le parent de l'élément dimensions
Voir cette explication du problème: jakpsatweb.cz/css/css-vertical-center-solution.html
En fournissant votre code va sûrement nous aider à fournir un cas de réponse

InformationsquelleAutor smilledge | 2012-10-02

css

Voici une autre façon de centrer un élément verticalement. Je suis tombé sur cette technique il y a quelques temps. Fondamentalement, il utilise un pseudo-élément et vertical-align: middle.

.block::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Vous devriez poster le code html aussi.

InformationsquelleAutor Mr. 14

3

Puisque c'est 2019 déjà, vous pouvez également utiliser flexbox pour y parvenir 🙂

Faire faire, ajoutez les classes suivantes à l'élément parent:
```
display: flex;
flex-direction: column;
justify-content: center;
```
Voir ce Violon
- Puisque c'est en 2019 et les gens qui utilisent encore IE, cela ne fonctionne pas dans toutes les conditions dans IE malheureusement.
- N'écoutez pas les opposants. Toute personne utilisant IE doit s'attendre à internet pour regarder comme de la merde en 2019.
InformationsquelleAutor bjarkig82
1

Je vais essayer de mettre le texte à l'intérieur d'un autre élément, de qui vous savez (ou l'ensemble) de la taille. Puis en définissant le positionnement relatif d', en haut, à gauche 50% et négative marges gauche et droite.

Voir ce Violon

Le seul problème est que cela repose sur un/fixe textblock. Si le texte est variable, je crains que vous devrez recourir à l'aide de Javascript..

InformationsquelleAutor c_kick

Concernant les liens hypertextes:

J'ai eu ce problème concernant les liens dans le menu principal. Et depuis qu'il a été <a> dans <li> balises j'ai besoin d'un peu de surface pour les liens cliquables/palpable(voir touchez la taille de la cible).
Donc, ce que j'ai fait était pour le <ul> je définir une hauteur fixe(par le biais d'un parent dans ce cas), le <li>-s sont un pourcentage de il et la <a>-s ont un min-height et la hauteur de la ligne des propriétés de jeu et il est facile à partir de là, de définir le haut. Le code:

.menu-header-main-container{
position: fixed;
top: 0;
bottom: 160px;
}    
.menu-header-main-container ul.menu {
          height: 100%; }
          .menu-header-main-container ul.menu li {
            height: 33.33%;
            max-height: 110px; }
            .menu-header-main-container ul.menu li a {
              line-height: 40px;
              min-height: 40px;
              top: calc(50% - 20px);
              position: relative; } }

InformationsquelleAutor D. Dan

Vous devez vous connecter pour publier un commentaire.