XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Responsive Ausrichtung Fotos (http://xhtmlforum.de/showthread.php?t=73483)

Soelg 24.04.2018 17:48

Responsive Ausrichtung Fotos
 
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&uuml;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>


cloned 24.04.2018 18:17

Was meinst du mit "mittig". Innerhalb deiner definierten <li>-Elemente? Oder mittig im Bezug auf deine gesamte Seite gesehen?
Kannst du den Code so zur Verfügung stellen, dass das Problem einfach nachgestellt werden kann? Also am besten mit URLs zu Bildern, die auch für uns erreichbar sind.
Und auch nur mit dem JS, welches für das nachvollziehen des Problems notwendig ist.


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:30 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023