Hallo, wie bekomme ich beim zusammenschieben des Browserfenster alle 4 gezeigtenFotos immer mittig?
Ich habe schon sehr viel probiert und noch keine Lösung gefunden.
Besten Dank und ich freue mich über eine Lösung!
Dieter
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Ferienwohnung Zellmer</title>
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<link href="lightbox/dist/css/lightgallery.css" rel="stylesheet"> <!--Lightbox-->
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
<script src="js/responsive-nav.js"></script>
</head>
<body>
<div class="container">
<header>
<a href="#home" class="logo" data-scroll>Ferienwohnung</a>
<nav class="nav-collapse">
<ul>
<li class="menu-item active"><a href="#home" data-scroll>Willkommen</a></li>
<li class="menu-item"><a href="#zimmer" data-scroll>Zimmer</a></li>
<li class="menu-item"><a href="#galerie" data-scroll>Galerie</a></li>
<li class="menu-item"><a href="#kontakt" data-scroll>Kontakt</a></li>
<li class="menu-item"><a href="#anreise" data-scroll>Anreise</a></li>
</ul>
</nav>
</header>
</div>
<main>
<div class="bild_beschriftung">
<img src="images/angermuende_markt.jpg"
alt="Marktplatz Angermünde">
<span>Ferienwohnung</span>
<span class="zellmer">Zellmer Angermünde</span>
<span class="kleinstadt_charme">Kleinstadt mit Charme</span>
<span class="schrift_marktplatz">Marktplatz Angermünde</span>
</div>
<section id="home">
<h1 class="ueberschriften">Willkommen</h1>
<style type="text/css">
/*body {
background-color: #152836;
}*/
.demo-gallery {
display: flex;
justify-content: center;
}
.demo-gallery > ul {
margin-bottom: 0;
margin: 0 auto;
}
.demo-gallery > ul > li {
float: left;
margin-bottom: 15px;
margin-right: 20px;
width: 200px;
}
.demo-gallery > ul > li a {
border: 0px solid #d8d8d8;
border-radius: 1px;
display: block;
overflow: hidden;
position: relative;
float: left;
}
.demo-gallery > ul > li a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery > ul > li a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery > ul > li a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery > ul > li a .demo-gallery-poster > img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery > ul > li a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .justified-gallery > a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
height: 100%;
width: 100%;
}
.demo-gallery .justified-gallery > a:hover > img {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
opacity: 1;
}
.demo-gallery .justified-gallery > a .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color 0.15s ease 0s;
-o-transition: background-color 0.15s ease 0s;
transition: background-color 0.15s ease 0s;
}
.demo-gallery .justified-gallery > a .demo-gallery-poster > img {
left: 50%;
margin-left: -10px;
margin-top: -10px;
opacity: 0;
position: absolute;
top: 50%;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
}
.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
background-color: rgba(0, 0, 0, 0.5);
}
.demo-gallery .video .demo-gallery-poster img {
height: 48px;
margin-left: -24px;
margin-top: -24px;
opacity: 0.8;
width: 48px;
}
.demo-gallery.dark > ul > li a {
border: 3px solid #04070a;
}
.home .demo-gallery {
padding-bottom: 80px;
}
@media screen and (max-width: 30em) {
.demo-gallery-poster img {
margin: 0 auto;
background-color: red;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body class="home">
<div class="demo-gallery">
<ul id="lightgallery" class="list-unstyled row">
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="lightbox/demo/demo/img/1-375.jpg 375, lightbox/demo/demo/img/1-480.jpg 480, lightbox/demo/demo/img/1.jpg 800" data-src="lightbox/demo/demo/img/1-1600.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
<a href="">
<img class="img-responsive" src="lightbox/demo/demo/img/thumb-1.jpg">
</a>
</li>
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="lightbox/demo/demo/img/2-375.jpg 375, lightbox/demo/demo/img/2-480.jpg 480, lightbox/demo/demo/img/2.jpg 800" data-src="lightbox/demo/demo/img/2-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
<a href="">
<img class="img-responsive" src="lightbox/demo/demo/img/thumb-2.jpg">
</a>
</li>
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="lightbox/demo/demo/img/13-375.jpg 375, lightbox/demo/demo/img/13-480.jpg 480, lightbox/demo/demo/img/13.jpg 800" data-src="lightbox/demo/demo/img/13-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
<a href="">
<img class="img-responsive" src="lightbox/demo/demo/img/thumb-13.jpg">
</a>
</li>
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="lightbox/demo/demo/img/4-375.jpg 375, lightbox/demo/demo/img/4-480.jpg 480, lightbox/demo/demo/img/4.jpg 800" data-src="lightbox/demo/demo/img/4-1600.jpg" data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
<a href="">
<img class="img-responsive" src="lightbox/demo/demo/img/thumb-4.jpg">
</a>
</li>
</ul>
</div>
</body>
</section>
<section id="zimmer">
<h1 class="ueberschriften">Zimmer</h1>
</section>
<section id="galerie">
<h1 class="ueberschriften">Galerie</h1>
</section>
<section id="kontakt">
<h1 class="ueberschriften">Kontakt</h1>
</section>
<section id="anreise">
<h1 class="ueberschriften">Anreise</h1>
</section>
<a href="#" class="back-to-top"><img class="pfeil" src="images/pfeil_nach_oben.png" alt="Pfeil" /></a>
</main>
<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
<script src="js/sticky_nav.js"></script> <!--Sticky Navigation scrollen-->
<script type="text/javascript" src="js/scroll_top.js"></script> <!--Button nach oben-->
<script type="text/javascript">
$(document).ready(function(){
$('#lightgallery').lightGallery();
});
</script>
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="lightbox/dist/js/lightgallery-all.min.js"></script>
<script src="lightbox/lib/jquery.mousewheel.min.js"></script>
</body>
</html>
24.04.2018, 16:48
Responsive Ausrichtung Fotos
Ähnliche Themen
Linear-Darstellung
