Html wie setze ich bilder zentriert untereinander?

2 Antworten

Von Experte Lezurex bestätigt
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML
21.03.2022, 15:03

Dies wäre eine Lösung:

<!doctype html>
<head>
  <title>Example</title>
  <style>
    #main {
      align-items: center;
      display: flex;
      flex-direction: column;
      row-gap: 5px; /* optional */
    }
  </style>
</head>
<body>
  <div id="main">
    <img alt="..." src="images/Illusion_Zeichenfläche 1-02.png">
    <img alt="..." src="images/Illusion_Zeichenfläche 1-03.png">
    <img alt="..." src="images/portrait.jpg" height="400px">
  </div>
</body>

Die Box wird zum Flexcontainer, der seine Kindelemente vertikal anordnet und horizontal zentriert. Mit dem row-gap-Property kannst du optional noch einen einheitlichen Abstand zwischen den Bildern definieren.

Beachte, dass deinen img-Elementen jeweils ein alt-Attribut fehlt. Dessen Wert sollte die Bilder textuell beschreiben, sofern sie nicht dekorativer (sondern informativer) Natur sind.

Das align-Attribut ist des Weiteren nicht mehr Teil des HTML-Standards. Ich würde dir empfehlen, ausschließlich mit aktuellen Quellen zu arbeiten, die mindestens HTML5 behandeln. MDN wäre so eine Quelle.
TechPech1984  21.03.2022, 15:10 

.......... ganz schön kompliziert für sowas einfaches ....
regex9  21.03.2022, 16:01
@TechPech1984

Nein, das ist nicht kompliziert. Da es nur den Container anfässt, ist es zudem flexibel für weitere Elemente, die sich ebenso in diese vertikale Reihe einordnen sollen.
Voidlord99 
Beitragsersteller
 21.03.2022, 15:05

thx dann probier ich das mal (der lehrer ist selbst nicht darin bewandert aber ich will zumindest ne saubere website abgeben^^)
TechPech1984
Nutzer, der sehr aktiv auf gutefrage ist
im Thema Computer
21.03.2022, 15:10

css

  #main>img {display:block ; margin: 0 auto;}

erklärung : um dinge in neuen zeilen beginnen zu lassen wird von display: inline (voreinstellung bei img tags) auf display: block gestellt .

und bei abständen nimmt man margin , wobei auto für automatischen abstand steht und 2 werte für 1 wert = oben und unten , 2 wert = rechts und links . mann könnte auch 4 werte nehmen (im uhrzeiger sinn)

margin : oben rechts unten links ;

also

margin : 0 auto 0 auto

oder wenn man abstände haben will

margin : 5px auto 5px auto

oder oder oder

hier das HTML


<html>
  <head>
    <style type="text/css">
      #main>img {display:block ; margin: 0 auto;}
    </style>
  </head>
  <body>
    <div id="main">
      <img src="00_original.png" />
      <img src="browzeichen.PNG" />
    </div>
  </body>
</html>