Hallo an alle,
ich bin ein HTML Neuling und habe an die Erfahrenen hier im Forum eine Frage. Ich möchte auf einer Html-Seite ein Bild und den passenden Text dazu auf gleicher Höhe platzieren, wie kann ich das am besten umsetzen?
LG
Lisa
Hallo
Die Abstände (padding, border, margin) anpassen und mit dem Flexbox-Modell ausrichten.
Gruss
MrMurphy
Zum Beispiel könnte das so in etwa gehen: http://codepen.io/jannisrohden/pen/NRWpPb
Danke für die schnellen Antworten, kann ich das auch mit einer Tabelle machen?
Tabellen dienen semantisch nicht für gestalterische Aufgaben, z.B. die vertikale Ausrichtung benachbarter Elemente/Inhalte, sondern zur Aufbereitung von tabellarischen Daten.
Man muss dazu sagen, dass FlexBox mit dem Internet-Explorer so seine Probleme hat:
http://caniuse.com/#search=flexbox
Die Alternative wäre, sowas mit JS zu machen (jQuery).
https://blog.kulturbanause.de/2015/04/die-hoehe-von-elementen-mit-jquery-abfragen-und-angleichen/
Demo:
https://media.kulturbanause.de/blog/2015/04/jquery-equal-height-41.html
IE8 hat seine besten Zeiten schon lange hinter sich gelassen.
Ansonsten funktioniert das Flexbox-Demo in den aktuelle(re)n Fassungen doch einwandfrei.
Ich glaube, Du hast hier das Anliegen mißverstanden 
Die Betonung liegt hier auf „auf“ 
Nicht die automatische Höhenangleichung benachbarter Elemente ist gefragt, sondern die vertikale Ausrichtung der Bildoberkante zum umgebenden Text - per Voreinstellung (ohne spezielle CSS-Formatierung) sitzt der Text untenbündig zur Grafik, was Auslöser/Motiv dieses Themas war.
Weil’s in der aktuellen SELFHTML-Fassung https://wiki.selfhtml.org nicht mehr geführt wird, hier eine Kopie davon 
https://www2.informatik.hu-berlin.de/Themen/www/selfhtml/html/grafiken/ausrichten.htm#css
Demo: https://www2.informatik.hu-berlin.de/Themen/www/selfhtml/html/grafiken/anzeige/img_css.htm
@LeCub’s Flexbox-Demo müsste wie folgt lauten, um dem Kriterium „obenbündig“ gerecht zu werden
main {
...
align-items: flex-start; /* anstatt center */
...
}Siehe http://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align_flex-start
Und für’s enthaltene
mit margin:0 den voreingestellten Außenabstand zurücksetzen, damit’s am Ende auch richtig paßt - sofern kein Reset-CSS eingebunden ist, das das übernimmt 
- [SIZE=3]Moderation: Von HTML nach CSS verschoben[/SIZE] -
Ich könnte dass ganze auch prefixen und damit alles bis zum IE10 unterstützen, wer Versionen darunter unterstützen möchte, verschwendet meiner Meinung nach Zeit.
@lisa009 wenn du einen Überblick über deine Möglichkeiten bei Flexbox haben möchtest (inklusive prefixes für den IE), empfehle Ich folgenden Artikel: http://www.mediaevent.de/css/display-flex.html
tut mir leid, habe es wirklich falsch gelesen.