Frage Zwei Bilder horizontal/vertikal mittig

farchris · 21 Juli 2015

Hallo,

ich versuche zwei Bilder genau in die Mitte der Seite zu bekommen.

Bei folgendem Code überlappen sich die beiden Bilder allerdings:

Code:

img {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -125px;
    margin-top: -125px;
}

Wie bekomme ich diese sauber und mittig nebeneinander?

Vielen Dank für Antworten!

MrMurphy · 21 Juli 2015

Hallo,

für eine konkrete Hilfe lieferst du leider zu wenig Informationen. Wir müssen schon die gesamte Seite einschließlich der Bilder kennen.

Allgemein solltest du die Bilder in einen geeigneten Container packen (zum Beispiel das figure-Element) und diesen dann ausrichten.

Gruss

MrMurphy

farchris · 22 Juli 2015

Hallo, danke für die Antwort.
Es sollen einfach zwei Bilder nebeneinander angezeigt werden.

Ich habe den Code nun etwas geändert, nun klappt etwas soweit.

Ist es so denn sauber (+ für alle gängigen Browser kompatibel)?
Ist es in Ordnung mit "img { padding: 20px; }" den Bildabstand voneinander zu vergrößern?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>
<style>


.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 200px;
  padding: 20px;
  margin-left: -300px;
  margin-top: -100px;
  box-sizing: border-box;
 text-align:center;
}

img {
   padding: 20px;
   }
</style>
</head>
<body>

<div class="box">
<img src="bild1.png" alt="bild1">
<img src="bild2.png" alt="bild2">
</div>


</body>
</html>

Danke!

Frage Zwei Bilder horizontal/vertikal mittig

farchris

Mitglied

MrMurphy

Senior HTML'ler

farchris

Mitglied

Neueste Beiträge