HTML/CSS: Rectangle avec une hauteur fixe, du texte centré verticalement/horizontalement, et une largeur minimale qui s'agrandit avec le texte intérieur

Question

Comme le titre le dit, j'essaie de faire un rectangle avec une hauteur fixe, un texte centré verticalement/horizontalement, et une largeur minimale qui s'agrandit lorsque le texte intérieur déborde. De plus, je voudrais être capable de placer ce rectangle "dynamiquement" n'importe où, donc je ne veux pas de codage absolu des coordonnées.

Voici ce que j'ai essayé jusqu'à présent : https://www.w3schools.com/code/tryit.asp?filename=G830P14CNCOT

Les problèmes avec cela sont : 1) le texte n'est pas parfaitement centré 2) le contenu qui ne rentre pas dans le rectangle tombe en dessous au lieu d'augmenter sa largeur.

Pour plus de commodité, voici le même code que celui du playground lié ci-dessus :

  .container {
    min-height: 2em;
    position: relative; /* afin que la zone centrale puisse être positionnée de façon absolue */
    min-width: 3rem;                     
    border-style: solid;
    border-width: 0.08rem;
    display: inline-block;
    background: #99d1ef;
  }
  .center-area {
    /* laisser remplir tout le conteneur */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
  }

  .center-area:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }

  .centered {
    display: inline-block;
    vertical-align: middle;
    background: #99dc60;
    white-space: nowrap;
  }

                court

                long

Answer 1

.meh {
  min-height: 50px;
  display: inline-flex;
  min-width: 100px;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
}

  modifier meh!

w3schools n'est pas W3C.

Alors que ce dernier est l' organisation responsable de la mise en œuvre des normes web, "l'école" est une entreprise qui profite des publicités, essayant de tirer profit de l'illusion qu'elle est somehow affiliée au Consortium. En bref, un parasite.

Parce que w3schools est une entreprise, ils doivent payer pour éditer leur contenu et leur contenu n'est pas souvent... pas vraiment génial.

Si vous recherchez une ressource d'apprentissage conviviale et exhaustive (autre que la documentation officielle de HTML et CSS du W3C - qui pourrait être trop technique pour les débutants), envisagez d'utiliser MDN Web Docs.
Contrairement à w3schools, ils sont à but non lucratif et bénéficient d'un énorme soutien (gratuit) de la communauté du développement web, y compris tous les principaux navigateurs, et du W3C.

Answer 2

Utilisez CSS Flex-box pour réaliser ceci: i.e

HTML:

  votre texte d'expansion long va ici!

css:

.flex-container {
    display: inline-flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    min-height: 2em;
    min-width: 3rem;                     
    border-style: solid;
    border-width: 0.08rem;
    background: #99d1ef;
  }

Flex-box est vraiment bon et rend les choses simples. Au lieu de toutes les lignes de code que vous avez écrites, voyez à quel point le code est simple avec flex. Pour plus de détails et de références sur flex, utilisez ce lien : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox