Bild zentrieren

[wotan]

Hallo zusammen
wie kann ich ein Bild in einer Textpassage zentrieren? Also der Text sollte rechts bleiben, das Bild wie gesagt zentriert. <center><img... /></center> geht schon, ist aber doch nicht mehr aktuell, oder?

freundliche Grüsse
Wotan

 

[_Thor_]

Wenn dein Text in einem Blockelement steht, vorzugsweise ein <p>, dann kannst du dein Bild mit

img {
  margin: 0 auto;
}

zentrieren.

 

[wotan]

hab

#inhalt {
 height: 600px;
 width: 903px;
 background: #bbbbbb ;
 overflow: auto;
 border-width: 1px;
 border-color: #000000;
 border-style: solid;
 padding: 10px;
}

und dann

<div id="inhalt">
     TEST SEITE &uuml;ber unser Sonnensystem <br /><br />
     <img src="./img/sonnensystem.jpg" border="2px" alt="Unser Sonnensystem" />
     <br /><br />   
</div>

 

[Junny]

Aus der Beschreibung kann ich leider nicht genau entnehmen, welche genaue Darstellung Du Dir wünschst, daher ein paar allgemeine Infos zum Positionieren von Bildern:

• Positionierung gehört zum Aussehen und wird nicht mit html gemacht, sondern mit css. Mit html zeichnest Du also zuerst unabhängig vom Aussehen, insbesondere der Positionierung, Deinen Inhalt aus. Tags wie center, b, i, small, big, br etc haben da genausowenig verloren wie z.B. das Attribut align.
• Anschließend legst Du das Aussehen mit css fest. Das Zentrieren ist dabei schon eines der schwereren Aufgaben. Dabei ist selbst das gar nicht so schwer: Zuerst muss man zwischen Objekten unterscheiden, die als block oder inline dargestellt werden.
• Blockelemente zentriert man, indem man ihnen eine Breite zuweist und per css den Außenabstand für rechts und links automatisch auf das gleiche Maß festlegt. Das geht mit "margin: 0 auto;", wobei die 0 für einen Außenabstand oben und unten steht.
• Inlineelemente zentriert man, indem man dem umgebenden Element per css"text-align: center;" zuweist.
• Den Text kannst Du mit float dazu bringen, das Bild zu umfließen.

Das sollten erstmal genügend Stichwörter sein, damit Du Dich näher mit dem Thema Positionierung/Zentrierung per css beschäftigen kannst.

Gruß
Junny

edit: Habe eben erst Deinen zweiten Post gelesen. In diesem Fall habe ich Dir das mal gemacht:

<div id="inhalt">
  <h1> TEST SEITE &uuml;ber unser Sonnensystem</h1> <!--Dies ist Deine Ueberschrift ersten Grades, also solltest Du sie mit h1 als solche kennzeichnen-->
  <img src="./img/sonnensystem.jpg" alt="Unser Sonnensystem" height="100" width="200" /> <!--Massen von Bildern stellen eine Ausnahme dar und sollten per html festgelegt werden, um den Seitenaufbau beim ersten Laden ruhiger zu gestelten.-->
</div>

#inhalt img {
    display: block;
    margin: 0 auto;
    border: 2px solid #000000; /* Border ist Aussehen und gehoert per css definiert */
}

 

[wotan]

Danke, das funktioniert prima!
zu meiner testseite: ich hab ein header-, ein navigation- und ein inhalts-div... und im inhalt kommt eben allen inhalt, wie bilder, text usw. Wie soll man den ein <br /> über css machen? also damit genau dort, wo der text "gebrochen" werden soll, eben gebrochen wird... das geht mit <br /> ja sehr einfach...

 

[_Thor_]

Wenn es nur eine neue Zeile in einem Fließtext sein soll, ist <br /> das richtige Mittel, wenn es ein Absatz sein soll, ein neues <p>

<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br />
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<p>
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

 

[Junny]

Als Blockelemente dargestellte Elemente erzeugen automatisch einen Zeilenumbruch. Da der Textabsatz p (engl. paragraph) ein Blockelement ist, musst Du dich um Zeilenumbrüche vor und nach Absätzen gar nicht weiter kümmern: Zeichne Absätze als solche aus und Du hast ein paar Sorgen weniger. Ein kleines Beispiel:

<h1>Absatzdemonstration</h1><p>Dies ist der erste Textabsatz. Wenn er vorbei ist, folgt automatisch ein Zeilenumbruch, da er ein Blockelement ist.</p><p>Dies ist der zweite Textabsatz. Wenn er vorbei ist, folgt ebenfalls automatisch ein Zeilenumbruch, da er ein Blockelement ist.</p>

Der Deutlichkeit halber habe ich hier sogar den Zeilenumbruch im html-Code weggelassen. Für echte Seiten sollte er aber auf jeden Fall verwendet werden, um den Quelltext übersichtlich zu machen.

Wenn Du an anderen Stellen außer nach Absätzen Zeilenumbrüche erzeugen willst, hinterfrage nochmal den Grund für diese Absicht und kennzeichne den Inhalt ggf. richtig. Beispielsweise sollte eine vertikale Menüleiste nicht mit lauter br-Tags erzeugt werden, sondern mit dem für ungeordnete Listen (was ein Menü ja darstellt) vorgesehenen Tag ul. Die einzelnen Listenelemente kommen dann in li-Tags.

Wenn das mal nicht klappt, kannst Du das betreffende Element meistens ganz einfach per "display: block" als Blockelement darstellen.

 

[wotan]

okay, danke für die infos!