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.
Voidlord99 
Fragesteller
 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^^)

0
TechPech1984  21.03.2022, 15:10 

.......... ganz schön kompliziert für sowas einfaches ....
0
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.

0
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>