Zentrierung von Bild und nebenstehendem Text

[Klauss]

Hallo,
ich mochte in einem Container ein Bild mit rechts daneben stehendem Text positionieren und zwar so, dass das Ganze zentriert ist.
Zahlreiche Versuche schlugen bisher fehl.

  
<div style="width: 90% margin-left: auto; margin-right: auto;"  
<a href="blabla"><img src="...." alt="...">Text</a>  
</div>  

Auch mit text-align-center ging es schief.
Wie geht es am besen?

Gruß
Klauss
PS: Die style-Angaben stehen natürlich in einer CSS-Datei

[Malcolm Beck´s]

હેલો

Auch mit text-align-center ging es schief.
Wie geht es am besen?

Du musst das umschliessende Element in 2 teilen, diese beiden dann nebeneinander zentrieren. Darein packst du je das Bild und den Text ein, das 1. Element auf text-align:right und fertig.

બાય

[Klauss]

Du musst das umschliessende Element in 2 teilen, diese beiden dann nebeneinander zentrieren. Darein packst du je das Bild und den Text ein, das 1. Element auf text-align:right und fertig.

Den Text kann ich doch nicht vom Bild trennen (aus den a-tag entfernen), da er ja sonst nicht auf den Klick reagiert.
Gruß
Klauss

[Malcolm Beck´s]

હેલો

Du musst das umschliessende Element in 2 teilen, diese beiden dann nebeneinander zentrieren. Darein packst du je das Bild und den Text ein, das 1. Element auf text-align:right und fertig.

Den Text kann ich doch nicht vom Bild trennen (aus den a-tag entfernen), da er ja sonst nicht auf den Klick reagiert.

Achja, stimmt. Tja, dann nehme ich es halt zurück.

Definiere doch mal genauer, was du mit zentriert meinst? text-align sollte es doch centern?

બાય

[Klauss]

Hi,

Achja, stimmt. Tja, dann nehme ich es halt zurück.

Definiere doch mal genauer, was du mit zentriert meinst? text-align sollte es doch centern?

Leider nicht.

Ich möchte:

|               <Bild> <Text>               |
 123456789012345             543210987654321
d.h. Abstand vom linken Rand des Containers (div) zum linken Bildrand =
     Abstand vom Ende des Textes zum rechten Rand des Containers (div)

und Klick auf Bild oder Text soll einen link aufrufen.
Gruß
Klauss

[Der Martin]

Hallo,

Ich möchte:

|               <Bild> <Text>               |
123456789012345             543210987654321
d.h. Abstand vom linken Rand des Containers (div) zum linken Bildrand =
     Abstand vom Ende des Textes zum rechten Rand des Containers (div)

und Klick auf Bild oder Text soll einen link aufrufen.

dann verstehe ich nicht, warum text-align für den Container bei dir nicht den gewünschten Effekt hat. Müsste theoretisch genau das bewirken, was du haben willst.

Ob das Containerelement selbst dabei mit margin:auto auch noch in seinem Elternelement zentriert ist, spielt dabei keine Rolle.

Ciao,
 Martin

[Malcolm Beck´s]

હેલો

Ich möchte:

|               <Bild> <Text>               |
und Klick auf Bild oder Text soll einen link aufrufen.

Was spricht dagegen, Bild und Text voneinander zu trennen?

Hier würde sich auch das figure-Element anbieten. Text einfach in figcaption.

બાય

[Matthias Scharwies]

Hallo,
ich mochte in einem Container ein Bild mit rechts daneben stehendem Text positionieren und zwar so, dass das Ganze zentriert ist.

Wie Malcolm Beck's es gesagt hat: nimm html5 -Elemente und pack Text und Bild in zwei Elemente:

  
<a href="...">  
   <figure>  
      <img ...>  
      <figcaption>Erklärung</figcaption>  
   </figure>  
</a>  
   

Du kannst jetzt figure zentrieren und den beiden Elementen img und figcaption die gleiche Breite geben:

  
figure                 { width: 90% margin-left: auto; margin-right: auto;}  
figure img, figcaption { width:50%}  

du kannst die Breite und Ausrichtung dann immer noch verfeinern.

[Klauss]

Hallo,

<a href="...">
   <figure>
      <img ...>
      <figcaption>Erklärung</figcaption>
   </figure>
</a>

>   
> Du kannst jetzt figure zentrieren und den beiden Elementen img und figcaption die gleiche Breite geben:  
> ~~~css
  

> figure                 { width: 90% margin-left: auto; margin-right: auto;}  
> figure img, figcaption { width:50%}  
> 

Die Zentrierung passt aber
1. das Bild wird riesengroß
2. der Text steht nicht neben sondern unter dem Bild.
Gruß
Klauss

[MrMurphy]

Hallo,

Die Zentrierung passt aber

1. das Bild wird riesengroß
2. der Text steht nicht neben sondern unter dem Bild.

da scheinen dir noch ein paar Grundlagen zu fehlen. Es wäre hilfreich wenn du deinen aktuellen Stand online bereitstellen könntest, zum Beispiel bei einem Freeware-Provider wie bplaced.net. So kann man nur raten was du falsch machst und das macht den Hilfswilligen nicht wirklich Spass.

Mit den figure- und figcaption-Elementen könnte ich mir folgende Lösung vorstellen:

http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_03_01_text_neben_bild.html

Alle CSS-Angaben befinden sich im Quelltext der Datei.

Gruss

MrMurphy

[Klauss]

Hallo,

Die Zentrierung passt aber

1. das Bild wird riesengroß
2. der Text steht nicht neben sondern unter dem Bild.

da scheinen dir noch ein paar Grundlagen zu fehlen. Es wäre hilfreich wenn du deinen aktuellen Stand online bereitstellen könntest, zum Beispiel bei einem Freeware-Provider wie bplaced.net. So kann man nur raten was du falsch machst und das macht den Hilfswilligen nicht wirklich Spass.

Wenn ich doch schreibe, dass das vorgestellte Beispiel nicht funktioniert wie gewünscht, so brauche ich es doch nicht ins Internet stellen.
Man braucht ja nur den Vorschlag auszuprobieren. Die Spezialisten im Forum würden wahrsheinlich schon am Code erkennen, dass er nicht das macht, was ich als Wunsch formuliert hatte.
Schönen Gruß
Klauss

[MrMurphy]

Hallo

Wenn ich doch schreibe, dass das vorgestellte Beispiel nicht funktioniert wie gewünscht, so brauche ich es doch nicht ins Internet stellen.

Doch, grade dann.

Man braucht ja nur den Vorschlag auszuprobieren. Die Spezialisten im Forum würden wahrsheinlich schon am Code erkennen, dass er nicht das macht, was ich als Wunsch formuliert hatte.

Ähmmm... Ich habe genau auf diesen Angaben mein Beispiel erstellt - und es funktioniert.

Das der Beitrag von Matthias Scharwies nur ein Hinweis in die richtige Richtung sein kann und keine Komplettlösung sollte doch wohl klar sein. Der Rest ist schlichtes Grundlagenwissen. Wenn du dabei Fehler machst sind die nur anhand deines vollständigen Quelltextes zu erkennen.

Gruss

MrMurphy

[Matthias Apsel]

Om nah hoo pez nyeetz, Klauss!

Wenn ich doch schreibe, dass das vorgestellte Beispiel nicht funktioniert wie gewünscht, so brauche ich es doch nicht ins Internet stellen.

Wenn du Hilfe möchtest, solltest du es den potentiellen Helfern so leicht wie möglich machen.

Wenn dein Auto kaputt ist, sagst du ja auf die Bitte es zur Werkstatt zu bringen ja auch nicht, „Ich hab doch schon gesagt, dass es nicht fährt“.

Man braucht ja nur den Vorschlag auszuprobieren. Die Spezialisten im Forum würden wahrsheinlich schon am Code erkennen, dass er nicht das macht, was ich als Wunsch formuliert hatte.

Du hast doch schon die Antwort bekommen, dass der von dir gepostete Code eigentlich das Gewünschte leisten sollte. Der Fehler liegt also woanders.

Matthias

[Matthias Scharwies]

Hallo,

Die Zentrierung passt aber

1. das Bild wird riesengroß
2. der Text steht nicht neben sondern unter dem Bild.

Hallo Klaus,
ich habe hier mal die Breite von 90% auf das Doppelte meines (kleinen) Bildes geändert:

http://www.jsr-hersbruck.de/site/subdomains/versuch-mit-figure.html

Das einzige was ich noch geändert habe, war das float:left; das dafür gesorgt hat, dass sie nebeneinander stehen und den grauen Hintergrund. Damit es gut aussehen soll, musst du <figcaption> Hintrgrund, Textfarbe und Rand nach deinem Geschmack anpassen, evtl. noch eine feste Höhe (die des Bildes) geben und den Text vertikal zentrieren.

Die hier vorgestellte Lösung:
http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_03_01_text_neben_bild.html

ist eleganter, aber das clearfix und border-box etwas schwerer zu verstehen. Trotzdem sollte es reichen, das zu kopieren und durch Herumprobieren auf der eigenen Seite einsetzen zu können.

LG Matthias

[Klauss]

Hallo Matthias,
danke, Dein Beispiel ist jetzt übersichtlich und sieht bei mir genau so aus.
Wo ich jetzt noch Probleme habe ist die vertikale Ausrichtung des Textes (auf die Bildmitte).
Ich war der Meinung, das ginge mit "vertical-align: middle;" - Fehlanzeige.
Dann hatte ich gehofft, es ginge mit "figcaption { margin-top: auto; padding-top:auto;}"
analog der horizontalen Zentrierung - Fehlanzeige.
Es geht wohl mit "figcaption { margin-top: 65px;}" oder "figcaption { margin-top: 15%;}".
aber das ist ja wieder nur eine Herumprobiererei und müsste dann mit jedem Bild und/oder Text anderer Größe neu gemacht werden.
Geht es, wie in den Beiträgen mehrfach erwähnt nur durch Herumprobieren?
Und wenn das Ganze auf dem PC vertikal und horizontal zentriert ist, dann auch auf einem Tablet - oder muss dann dafür wieder neu "justiert" werden?
Schönen Gruß
Klauss

[Matthias Scharwies]

Wo ich jetzt noch Probleme habe ist die vertikale Ausrichtung des Textes (auf die Bildmitte).
Ich war der Meinung, das ginge mit "vertical-align: middle;" - Fehlanzeige.
Dann hatte ich gehofft, es ginge mit "figcaption { margin-top: auto; padding-top:auto;}"
analog der horizontalen Zentrierung - Fehlanzeige.

1. Bei einzeiligen Erklärungen könntest du line-height:100% nehmen. Das sieht aber spätestens bei kleinen Bildschirmen bescheuert aus, wenn es doch einen Zeilenumbruch gibt.

2. margin-top: fest einstellen

Es geht wohl mit "figcaption { margin-top: 65px;}" oder "figcaption { margin-top: 15%;}".
aber das ist ja wieder nur eine Herumprobiererei und müsste dann mit jedem Bild und/oder
Text anderer Größe neu gemacht werden.

Ich versuche, dass die Bilder auf meiner Homepage immer gleich groß sind. Dann könnte man ein festes margin-top geben, was bei unterschiedlich langen Erklärungen aber auch blöd aussehen würde.

Matthias

[Gunther]

Hallo Klaus,

soweit ich sehe, nachdem ich mir den Thread durchgelesen, und mir die verlinkten Beispiele angeguckt habe, hat dir noch niemand die imho "einfachste" Variante vorgeschlagen.

Nämlich 'display: table[-row|-cell]'.

Ist für deinen Fall geradezu prädestiniert. ;-)

Beispiel

Gruß Gunther

[Klauss]

Hallo Gunther,

Ist für deinen Fall geradezu prädestiniert. ;-)

Beispiel

In der Tat, sehr übersichtlich!
Aber wie bekomme ich es noch horizontal zentriert?
Habe folgendes ohne Erfolg versucht:
figure {margin-left: auto; margin-right: auto; }
Gruß
Klaus

[Gunther]

Hallo,

Ist für deinen Fall geradezu prädestiniert. ;-)

Beispiel

In der Tat, sehr übersichtlich!
Aber wie bekomme ich es noch horizontal zentriert?
Habe folgendes ohne Erfolg versucht:

Update

Das vorherige Beispiel war auch nicht valide, da <figcaption> entweder first- oder last-child von <figure> sein muss - sorry.

Das upgedatete Beispiel ist nun auch valide und dein Link horizontal zentriert.
Der Code sollte ja "selbsterklärend" sein, wenn du dir die verwendeten CSS Eigenschaften mal näher zu Gemüte führst, und dir anschaust, auf welche Elemente jeweils was angewendet wird.

Gruß Gunther

[Matthias Scharwies]

Das upgedatete Beispiel ist nun auch valide und dein Link horizontal zentriert.
Der Code sollte ja "selbsterklärend" sein, wenn du dir die verwendeten CSS Eigenschaften mal näher zu Gemüte führst, und dir anschaust, auf welche Elemente jeweils was angewendet wird.

Hallo Gunther,

daran hatte ich auch schon gedacht (Matthias Apsel hat es mir bei anderen Arbeiten mehrmals vorgeschlagen), es aber trotz googeln nicht hingekriegt. Vielen Dank für diese einfache, elegante Lösung!

Gruß Gunther

Danke und freundliche Grüße

Matthias

[Klauss]

Vielen Dank für Eure Hilfe!
Schönen Abend
Klaus

[Klauss]

Hallo,
wenn ich die CSS-Angaben nur für den einen Fall gelten lassen möchte,
ist dann folgendes korrekt (funktioneren tut es, aber ist es auch optimal)?

  
<style>  
.wrapper {  
    text-align: center;  
}  
  
.wrapper > a {  
    display: inline-block;  
    width: auto;  
    margin: 0;  
    padding: 0;  
    background-color: grey;  
}  
  
.wrapper > a > figure {  
    display: table;  
    margin: 0;  
    border: 1px dotted red;  
 }  
  
.wrapper > a > figure > img,  
.wrapper > a > figure > figcaption {  
    display: table-cell;  
    padding: 10px;  
    vertical-align: middle;  
}  
</style>  

... also überall Ergänzung um «.wrapper > a» bzw. «.wrapper > a >»
Grß
Klaus

[Gunther]

Hallo!

wenn ich die CSS-Angaben nur für den einen Fall gelten lassen möchte,
ist dann folgendes korrekt (funktioneren tut es, aber ist es auch optimal)?

Das ist eine (typische) Frage im Webdesign, die sich normalerweise wenn überhaupt nur dann beantworten lässt, wenn man den kompletten HTML Code der gesamten Website kennt.

Und selbst dann gibt es mindestens ein halbes Dutzend Varianten.

Manch einer mag dann vielleicht auch noch die "Performance" mit in Erwägung ziehen, oder die "Robustheit" bei möglichen Änderungen am HTML Code, oder oder ...!

Grundsätzlich gilt imho die Regel:
Für Elemente, die definitiv nur einmal auf einer Seite vorkommen => ID
Für Elemente, die ein oder mehrmals auf einer Seite vorkommen => Class

.wrapper {
    text-align: center;
}

.wrapper > a {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0;
    background-color: grey;
}

.wrapper > a > figure {
    display: table;
    margin: 0;
    border: 1px dotted red;
}

.wrapper > a > figure > img,
.wrapper > a > figure > figcaption {
    display: table-cell;
    padding: 10px;
    vertical-align: middle;
}

> ... also überall Ergänzung um «.wrapper > a» bzw. «.wrapper > a >»  
  
Hier hast du im Prinzip zwei separate "Dinge". Zum einen den "Wrapper", der ggf. öfter Verwendung findet, und zum anderen die "spezielle" Konstellation mit dem Link (, die ggf. auch öfter vorkommen kann) und dem Figure-Element samt Caption.  
  
Ohne jetzt deine Site in allen Einzelheiten zu kennen, würde ich dem Link-Element also z.B. eine ID oder Klasse verpassen. Dann kannst du dir im CSS das ".wrapper" sparen und beschränkst es auf das/ die entsprechende(n) Link-Elemente.  
  
  
Gruß Gunther

[Malcolm Beck´s]

હેલો

ist dann folgendes korrekt (funktioneren tut es, aber ist es auch optimal)?

Optimal gibt es nicht. Tausend wege führen nach Rom und wieder raus, viele mehr oder weniger Identisch. Wie willst du dir da das beste rauspicken?

બાય

[Malcolm Beck´s]

હેલો

Die Zentrierung passt aber

1. das Bild wird riesengroß
2. der Text steht nicht neben sondern unter dem Bild.

Einfach ein bisschen rumprobieren, irgendwann passt es schon (10 minuten spielerei).

બાય

[Klauss]

Einfach ein bisschen rumprobieren, irgendwann passt es schon (10 minuten spielerei).

Hallo બાય    (was immer das auch bedeuten mag)
danke für Deine bisherige Mühe,
an Deinem Beispiel kann ich aber nicht erkennen, dass < <bild> <text> > auf der Seite
   horizontal «zentriert» sind.
Und muss man eine Zentrierung durch Herumprobieren realisieren und nicht durch ein "straight forward"?
Wenn ich Dein Beispiel aus dem Internet auf meinen Rechner hole (ich meine, ich hätte alles erwischt), so erscheint der Text wieder unter dem Bild:

<html>  
<body>  
<style>  
html,  
body,  
figure,  
figcaption {  
    margin:0;  
    padding:0;  
}  
a {  
    cursor:pointer;  
}  
figure {  
    text-align:center;  
    border:1px solid red;  
  
    a,  
    figcaption {  
       width:49%;  
       display:inline-block;  
       vertical-align:middle;  
       border:1px solid green;  
       text-align:left;  
          a {  
              border:0 none;text-align:left;  
          }  
    }  
    a {  
        text-align:right;  
    }  
}  
</style>  
</head>  
<body>  
  
<figure>  
      <a><img src="bild1.jpg" alt="Auto von Wikipedia" /></a>  
      <figcaption><a>Erklärung</a></figcaption>  
   </figure>  
</body>  
</html>   

Schönen Gruß
Klauss