CSS Text Mittig ausrichten trotz max-width?

Hi,

also ich habe ein Text erstellt, und habe diesem gesagt "text-align: center", und eine max-width: 20%;

Aber ernimmt zwar jetzt die 20% max-width, aber zentriert den Text nicht mehr Links?

warum?

LG

Answer 1

[medmonk]

Wie ProProof bereits richtig geschrieben hat, wirkt sich die Eigenschaft "text-align" nur auf den Inhalt eines Elementes aus. Wenn das Element zentriert werden soll, kannst du dies mithilfe von margin oder mit dem Flexbox-Modell umsetzen.

HTML:

<div class="box">
  <p>Hier steht ein zentrierter Text.</p>
</div>

CSS:

/* align-text within */ 
p {
  text-align: center;
}


/* = (max-)width and margins ==== */
p {
  max-width: 20%;
  margin-left: auto;
  margin-right: auto;
  /* shorthand for top/bottom and left/right */
  margin: 0 auto;
}

/* = (max-)width & margin-inline ==== */
p {
  max-width: 20%;
  margin-inline: auto;
}

/* = CSS min function and margin-inline ==== */
p {
  /* combined min and max values */
  width: min(320px - 1rem, 20%);
  margin-inline: auto; 
}

/* = flexbox ==== */
.box {
  display: flex; 
  justify-content: center;
}

.box p {
  max-width: 20%;
}

/* = position and transform ==== */
.box {
  position: relative;
}

.box p {
  max-width: 20%;
  position: absolute;
  left: 50%; 
  transform: translateX(-50%);
}

LG medmonk

Woher ich das weiß: Berufserfahrung – UI/UX Designer, Full-Stack Developer

Answer 2

[ProProof]

Die Eigenschaft "text-align" beeinflusst nur die Ausrichtung des Texts innerhalb eines Elements, nicht die Ausrichtung des Elements selbst. Um das Element selbst zentriert auszurichten, musst du die Eigenschaft "margin" verwenden.

Eine Möglichkeit wäre, die linke und rechte Margin des Elements auf "auto" zu setzen, was dazu führt, dass die verbleibenden Abstände gleichmäßig auf beide Seiten des Elements verteilt werden. Das sieht so aus:

div { max-width: 20%; 
margin-left: auto; 
margin-right: auto; 
text-align: center; }

Eine andere Möglichkeit wäre das verwenden von flexbox:

div { 
max-width: 20%; 
display: flex; 
justify-content: center; 
text-align: center; }

Es gibt auch noch andere Möglichkeiten, das Element zentriert auszurichten, z.B mittels grid oder mittels positioning.