Bilder nebeneinander und zentriert

Diskutiere Bilder nebeneinander und zentriert im HTML Forum im Bereich Programmierung; Hallo Leute. Danke, dass ich hier sein darf. Ich hab ein kleines Problemchen. Ich bin gerade dabei meine private responsive Webseite zu basteln...
Neues Thema erstellen Antworten
  • Bilder nebeneinander und zentriert Beitrag #1
M
Michael53
New member
Beiträge
1
Punkte Reaktionen
0
Hallo Leute.

Danke, dass ich hier sein darf.
Ich hab ein kleines Problemchen. Ich bin gerade dabei meine private responsive Webseite zu basteln. Soweit funktioniert es auch so wie ich es möchte. Doch nun zu meinem Problem. Ich möchte Bilder zentriert einfügen, die dann mit der Lightbox zu öffnen sind. Doch irgendwas fehlt mir da noch, dass dann sich die Bilder verschieben, wenn ich die Seite verkleinere.
Hier mal der HTML-Code und das CSS:
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
    <title>BIRD VIEW Foto & Film</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css" type="text/css">
	<link rel="stylesheet" href="css/lightbox.min.css">
	<link href="css/lightbox.css" rel="stylesheet">
</head>
<body>
      <div class="topnav" id="myTopnav">
          <a href="#home" class="active">Home</a>
		  <a href="#über mich">Über mich</a>
          <a href="#fotos">Fotos</a>
          <a href="#panoramen">Panoramen</a>
          <a href="#videos">Videos</a>
		  <a href="#contact">Kontakt</a>
          <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                <i class="fa fa-bars"></i>
            </a>
        </div>
<div style="padding-left:16px"></div>
<div class="Headerbild"><img src="images/Headerbild.png" alt="Bild"></div>
<div class="flex">
	<a href="Bilder/1-groß.jpg" rel="lightbox[land]" title="Land 1">
  		<img src="Bilder klein/1.jpg" alt="Bild1" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/2-groß.jpg" rel="lightbox[land]" title="Land 2">
  		<img src="Bilder klein/2.jpg" alt="Bild2" width="100" height="100">
	</a>	
<div class="flex">
	<a href="Bilder/3-groß.jpg" rel="lightbox[land]" title="Land 3">
  		<img src="Bilder klein/3.jpg" alt="Bild3" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/4-groß.jpg" rel="lightbox[land]" title="Land 4">
  		<img src="Bilder klein/4.jpg" alt="Bild4" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/5-groß.jpg" rel="lightbox[land]" title="Land 5">
		<img src="Bilder klein/5.jpg" alt="Bild5" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/6-groß.jpg" rel="lightbox[land]" title="Land 6">
		<img src="Bilder klein/6.jpg" alt="Bild6" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/7.jpg" rel="lightbox[land]" title="Land 7">
		<img src="Bilder klein/7.jpg" alt="Bild7" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/8.jpg" rel="lightbox[land]" title="Land 8">
		<img src="Bilder klein/8.jpg" alt="Bild8" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/9.jpg" rel="lightbox[land]" title="Land 9">
		<img src="Bilder klein/9.jpg" alt="Bild9" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/10.jpg" rel="lightbox[land]" title="Land 10">
		<img src="Bilder klein/10.jpg" alt="Bild10" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/11.jpg" rel="lightbox[land]" title="Land 11">
		<img src="Bilder klein/11.jpg" alt="Bild11" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/12.jpg" rel="lightbox[land]" title="Land 12">
		<img src="Bilder klein/12.jpg" alt="Bild12" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/13.jpg" rel="lightbox[land]" title="Land 13">
		<img src="Bilder klein/13.jpg" alt="Bild13" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/14.jpg" rel="lightbox[land]" title="Land 14">
		<img src="Bilder klein/14.jpg" alt="Bild14" width="100" height="100">
	</a>
<div class="flex">
	<a href="Bilder/15.jpg" rel="lightbox[land]" title="Land 15">
		<img src="Bilder klein/15.jpg" alt="Bild15" width="100" height="100">
	</a>
</div>
</div>	
</div>	
</div>	
</div>	
</div>	
</div>	
</div>	
</div>	
</div>	
</div>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>
<script src="js/lightbox-plus-jquery.js"></script>
</body>
</html>

Code: 
.topnav{
    background-color:lightslategrey;
    overflow: hidden;
	margin: 0 auto;
	width: 90%;
	max-width: 1080px;
	margin-top: 20px;
	border-radius: 10px;
}
/* Headerbild-Anfang */

.Headerbild{
	margin: 0 auto;
	width: 90%;
	max-width: 1080px;
	margin-top: 15px;
	margin-bottom: 15px;
}
.Headerbild img{
	width: 100%;
	border-radius: 10px;

/* Headerbild-Ende */
}
.topnav a{
     float: left;
     display: block;
     color: black;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 17px;
 }
.topnav a:hover{
     background-color: #ddd;
     color: black;
 }
.topnav a.active{
     background-color: #4CAF50;
     color: white;
 }
.topnav .icon{
     display: none;
 }
* {
margin: 0;
padding: 0;
}

 @media screen and (max-width: 1080px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1080px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/* Bilder-Anfang */

.flex{
	display: flex;
	justify-content: center;
	align-items:center;
	margin: 5px;
}
 
Thema:

Bilder nebeneinander und zentriert

Oben Unten