0

i have some trouble finding a way to show some thumbs in the middle of the screen, especially if one resizes the window (-> responsive design).

A couple a images are displayed in the next line but then centerd...which is not a surprise at all...but how can i have the center effect (in regard to have the images displayed always in the center) But have the last images float left so that they have an equal beginning with the above line?) enter image description here

My HTML code so far looks like this (see also he fiddle : http://jsfiddle.net/Zw9Ug/) 

<!doctype html>  
<html lang="de">  
    <head>  
        <meta charset="utf-8">  
        <title>Template Gallery </title>  
        <meta name="description" content="This is the content">  
    </head>  
    <body>
        <div id="wrapper">
            <div id="inner">
                <div id ="gallery_container">
                    <!-- // TODO - hurry -->
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />
                    <img src="http://www.hdg.de/uploads/pics/pic270-0_01.jpg" alt="" title="" />

                </div>
            </div>
        </div>

    </body>  
</html>

css:

#wrapper{
    margin:0px auto;
    width:90%;
    text-align: center;
}
#inner{
    margin-left: auto;
    margin-right: auto;

}
#gallery_container{
    width:auto;
    float:left;
}
#gallery_container img{
    min-height:90px;
    max-height:170px;
}
body {
    background-color: grey;
}

Thanks a lot!

4

1 回答 1

1

根据您的实际需要，您可以添加以下内容：

#gallery_container img{
   float: left;
}

但是，边框与最左/最右图像之间的空间将不一样。

或者，如果您确实想达到这种效果，您可以添加：

#wrapper{
    text-align: justify;
}

但是现在图像之间的间距并不完全相同。

于 2012-06-29T15:10:58.543 回答