zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Responsive Ausrichtung Fotos

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.04.2018, 16:48
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 31
Soelg befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 24.04.2018, 17:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.976
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
fotos mittig ausrichten, responsive

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Responsive Design funktioniert nur halbwegs apattoo CSS 3 08.07.2015 10:13
Kundeninteresse an Responsive Layout heiko_rs Offtopic 18 24.05.2013 13:37
Text align wenn Fotos im selben div "absolute" positioniert sind soigroeg CSS 3 17.04.2013 20:16
Lizenzfreie Fotos für Layouts Electrohunter Grafik, Design, Typografie 9 20.05.2010 14:32
Fotos und Fotogalerien Dieter CSS 5 13.01.2004 21:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:53 Uhr.