CSS Text unten positionieren

[mixmastertobsi]

Hallo,

wie kann ich einen Text in einen A-Tag unten positionieren. Mit vertical-align: bottom geht es leider nicht.

[Matthias Apsel]

Hallo mixmastertobsi,

wie kann ich einen Text in einen A-Tag unten positionieren.

In einem a-Tag kannst du den Text gar nicht positionieren.

Mit vertical-align: bottom geht es leider nicht.

Sollte aber.

Bis demnächst
Matthias

[mixmastertobsi]

Geht leider nicht.

<a href='#' style='position: absolute; width: 100px; height: 100px; vertical-align: bottom;'>Text</a>

[Matthias Apsel]

Hallo mixmastertobsi,

Geht leider nicht.

Sollte aber.

Das eine ist eine unzureichende Problembeschreibung, das andere ein wenig hilfreicher Lösungsvorschlag.

Bis demnächst
Matthias

[TS]

Hello,

wie kann ich einen Text in einen A-Tag unten positionieren. Mit vertical-align: bottom geht es leider nicht.

Das a-Element ist ein Inline-Element, hat also von Haus aus ger keine Ausdehnung, bzw. nur die seines Inhaltes. Du müsstest uns also zunächst erst einmal sagen, in welchem Blockelement mit definierter Höhe du den Link "ganz unten" positionieren willst.

Liebe Grüße
Tom S.

[marctrix]

Hej mixmastertobsi,

wie kann ich einen Text in einen A-Tag unten positionieren. Mit vertical-align: bottom geht es leider nicht.

Bei mir schon - allerdings nur dort, wofür vertical-align gedacht ist. Also Zeilen und Tabellen-Zellen.

Was versuchst du denn statt dessen? In deinem anderen posting steht noch was von position: absolute. — Das wiederum bezieht sich auf body oder den nächsten Vorfahren, der ein position: relative hat.

Marc

[mixmastertobsi]

Ich mache euch mal noch ein Beispiel. In meinem Beispiel soll der Text "LINK" unten mittig zentriert dargestellt werden.

<div style='position: relative; width: 200px; height:200px;'>
<a href='#' style='position: absolute; display: block; left:0; top:0; width:100%; height:100%; text-align: center;'>LINK</a>
</div>

[MrMurphy1]

Hallo

Man mag es dir kaum noch schreiben: Flexbox.

Du kannst dein ganzes CSS löschen und brauchst nur für das div

      div {
         width: 200px;
         height: 200px;
         display: flex;
         justify-content: center;
         align-items: flex-end;
      }

Einfacher, übersichtlicher, keine Nebenwirkungen.

Gruss

MrMurphy

[MrMurphy1]

Hallo

Das geht mir Flexbox. Das vertical-align kannst du weglassen. Und deinem CSS dann

display: flex; align-items: flex-end;

hinzufügen.

Gruss

MrMurphy