Hallo
Du verwendest einige Vorgehensweisen, die sich nicht bewährt haben.
Das fehlende schließende p-Tag stufe ich als Flüchtigkeitsfehler ein, das hat mit deinem eigentlichen Problem auch nichts zu tun.
Obwohl auch die div-Elemente nichts mit deinem eigentlichen Problem zu tun haben solltest du nach Möglichkeit die aktuellen HTML5-Elemente verwenden. Damit ergibt sich der folgende HTML-Quelltext:
Code:
<section class="row">
<div class="textcell">
<p>Westernreiten ist eine Reitweise, die sich an die Arbeitsreitweise der amerikanischen Cowboys anlehnt und ihren Ursprung im spanischen Arbeitsreiten hat, dem Vaquero-Reiten. Für die Cowboys gehört es zum Alltag, bis zu 16 Stunden im Sattel zu sitzen.</p>
</div>
<figure class="picturecell">
<img src="http://horse-harmony.info/TrailSilvie.jpg">
</figure>
</section>
Da die br-Elemente für mich keinen Sinn ergeben habe ich die weggelassen. Abstände werden bei Bedarf über css erzeugt.
Ich verwende einige grundsätzliche CSS-Angaben, die sich bewährt haben, dazu gehört
Code:
figure {
min-width: 0;
max-width: 100%;
margin: 0rem;
}
img {
min-width: 0;
display: block;
max-width: 100%;
border: 0;
}
Am einfachsten ist es nun in der Regel, zunächst die CSS-Angaben für schmale Fenster zu erstellen. Dazu reicht
Code:
.row {
padding: 0.5rem;
}
.textcell {
margin-bottom: 1rem;
}
.picturecell img {
margin: 0 auto;
}
Damit stehen Text und Bild übereinander, das Bild ist seitlich zentriert.
In einer vertikalen Zentrierung des Bildes sehe ich bei diesem Layout keinen Sinn.
Den Text setze (lasse) ich linksbünding, da Blocksatz durch die uneinheitlichen Abstände zwischen den Worten das Lesen erschwert und häßlich aussieht. Blocksatz sollte bei Webseiten grundsätzlich vermieden werden.
Jetzt schaue ich nach, ab welcher Fensterbreite der Text und das Bild optisch gut nebeneinander passen. Ich habe mich für 700px entschieden und füge ein entsprechende Media Query ein:
Code:
@media only screen and (min-width: 700px) {
}
In die Media Query kommen nun die Angaben für das gewünschte Layout.
Schmalen Spalten sollten feste Breiten vergeben werden.
Wenn der Text höher als das Bild wird soll das Bild wie von dir gewünscht auch vertikal zentriert werden.
Das wird mit den folgenden Angaben in der Media Query erreicht:
Code:
.row {
display: flex;
}
.textcell {
margin-bottom: 0rem;
}
.picturecell {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 400px;
display: flex;
align-items: center;
}
Ich habe mal eine Beispielseite erstellt, in der du das Verhalten direkt ausprobieren kannst. Den Inhalt habe ich zweimal eingefügt. Das zweite Mal mit einer Hintergrundfarbe für den Bild-Container, damit die Zentrierung sichtbar wird:
http://boratb.bplaced.net/index33.html
Gruss
MrMurphy
