Baseline-Alignment

[mihe7]

Hallo zusammen,

nehmen wir mal an, ich habe ein Bild, das Text enthält, dessen Baseline bei 30 px vom oberen Rand beginnt. Kann mir bitte jemand verraten, wie man mit HTML/CSS die Baseline des Bildes an der Baseline des Texts ausrichtet?

Danke schon mal.

 

[Blender3D]

Vielleicht hilft dir das weiter.
https://css-tricks.com/almanac/properties/v/vertical-align/

 

[mrBrown]

Hast du mal ein Beispiel, wie das aussehen soll?

 

[mihe7]

Hast du mal ein Beispiel, wie das aussehen soll?

HTML/CSS, oder? 🤣

Spaß bei Seite:



Bekannt ist die Position der Baseline des q im Bild (z. B. 30px von oben). An dieser Position möchte ich nun die Baseline des Texts ausrichten.

 

[mihe7]

Vielleicht hilft dir das weiter.
https://css-tricks.com/almanac/properties/v/vertical-align/

Danke dafür, aber dort wird das Problem eher gezeigt als gelöst (im Bild Tent packed ist der Haken nicht auf der Baseline des Texts).

 

[sascha-sphw]

Ich würde es so machen. Gibt aber bestimmt auch andere/bessere Möglichkeiten.

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

 

[mihe7]

Habe gerade gesehen: wenn die beiden Teile inline nacheinander kommen, kann man das tatsächlich per vertical-align realisieren. Dann aber muss man die Baseline im Bild vom unteren Rand berechnen und kann das Bild entsprechend "absenken":

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

 

[mihe7]

Nachdem sonst keiner einen Tipp hat, markiere ich mal meine Antwort für die Nachwelt als Lösung, wenn es recht ist. Danke Euch allen, habt mich auf den (hoffentlich) richtigen Ansatz gebracht.

 

[sascha-sphw]

Nachdem sonst keiner einen Tipp hat, markiere ich mal meine Antwort für die Nachwelt als Lösung, wenn es recht ist. Danke Euch allen, habt mich auf den (hoffentlich) richtigen Ansatz gebracht.

Falsch ist es für mich nur dann, wenn es nicht tut was es soll. 🙃

 

[mihe7]

Da ist was dran. Vielleicht hätte ich "vorgesehenen Ansatz" schreiben sollen. Das Problem ist, dass ich ein CSS-Layout gefühlt nur schief anzuschauen brauche, damit es sich augenblicklich in Müll verwandelt