Question

我正在制作一个画廊而且我遇到了问题。我希望彼此相邻的图像缩略图，在中心，我也希望有彼此不同的不同组。

这就是我所拥有的：JsFiddle link。

如何使第1组和第2组的图像居中并且彼此相邻，如何在第1组下进行第2组？

提前致谢！

这是没有JsFiddle的代码：
Html：

<html>
    <head>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/lightbox.min.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link href="css/lightbox.css" rel="stylesheet" />
    </head>
    <body>
        Group 1: <br>
        <div class="img">
            <a href="img/een.jpg" data-lightbox="Group-1">
                <img src="img/een.jpg" alt="Een" width="100" height="100">
            </a>
        </div>

        <div class="img">
            <a href="img/twee.jpg" data-lightbox="Group-1">
                <img src="img/twee.jpg" alt="Twee" width="100" height="100">
            </a>
        </div>
        <br>

        Group 2: <br>

        <div class="img">
            <a href="img/drie.jpg" data-lightbox="Group-2">
                <img src="img/drie.jpg" alt="Drie" width="100" height="100">
            </a>
        </div>
        <div class="img">
            <a href="img/vier.jpg" data-lightbox="Group-2">
                <img src="img/vier.jpg" alt="Vier" width="100" height="100">
            </a>
        </div>
    </body>
</html>

CSS：

div.img {
    height: auto;
    width: auto;
    float: left;
}

div.img img {
    display: inline;
    margin: 5px;
    opacity: 0.5;
}

div.img a:hover img {
    opacity: 1;
}

Answer 1

Example

稍微修改您的HTML和CSS到下面。至关重要的是，您希望将img包裹在设置了text-align:center;的父元素中，您可以使用例如以下（see here for centred titles）：

Group 1:
<br>
<div class="img"> <a href="img/een.jpg" data-lightbox="Group-1">
      <img src="img/een.jpg" alt="Een" width="100" height="100" />
  </a>
 <a href="img/twee.jpg" data-lightbox="Group-1">
      <img src="img/twee.jpg" alt="Twee" width="100" height="100" />
  </a>

</div>
Group 2:
<br>
<div class="img"> <a href="img/drie.jpg" data-lightbox="Group-2">
      <img src="img/drie.jpg" alt="Drie" width="100" height="100" />
  </a>
 <a href="img/vier.jpg" data-lightbox="Group-2">
      <img src="img/vier.jpg" alt="Vier" width="100" height="100" />
  </a>

</div>

CSS

div.img {
    text-align:center;
}
a {
    text-decoration:none;
}
div.img img {
    display: inline;
    margin: 5px;
    opacity: 0.5;
}
div.img a:hover img {
    opacity: 1;
}

Answer 2

在这里你可以做出这样的决定

DEMO

    <div class="galleryItem">
        <a href="#"><img src="http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg" alt=""></a>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
.........

.container {
    width: 80%;
    margin: 30px auto;
    overflow: hidden;
}
.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;
}

.galleryItem h3 {
    text-transform: uppercase;
}

.galleryItem img {
    max-width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;    

    width: 16%;
    margin:  2% 2% 50px 2%; 
}

/* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
    .galleryItem {width: 21%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
    .galleryItem {width: 29.33333%;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    .galleryItem {width: 46%;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    .galleryItem {width: 96%;}
    .galleryItem img {width: 96%;}
    .galleryItem h3 {font-size: 18px;}
    .galleryItem p, {font-size: 18px;}
}

Answer 3

将您的论坛包装在div中。

HTML

   <div class="group">
      Group 1: <br>
      <div class="img">
        <a href="img/een.jpg" data-lightbox="Group-1">
         <img src="img/een.jpg" alt="Een" width="100" height="100">
         </a>
       </div>

        <div class="img">
          <a href="img/twee.jpg" data-lightbox="Group-1">
         <img src="img/twee.jpg" alt="Twee" width="100" height="100">
         </a>
    </div>
</div>

CSS：

div.img {
  display:inline-block;
}

DEMO

Answer 4

要集中图像，请在它们周围放置一个包装div。

要确保第2组低于第1组，您可以在第一组之后放置一个带有CSS clear属性的div，或者使用CSS after选择器来获得相同的效果，而无需实际更改html

（在此示例代码中，我在第一组之后插入一个额外的div。）

<强> HTML 第1组：

<div class="img">
  <a href="img/twee.jpg" data-lightbox="Group-1">
    <img src="img/twee.jpg" alt="Twee" width="100" height="100" />
  </a>
</div>
<br>

<div class='clearfix'></div>

Group 2: <br>

<div class="img">
  <a href="img/drie.jpg" data-lightbox="Group-2">
    <img src="img/drie.jpg" alt="Drie" width="100" height="100" />
  </a>
</div>
<div class="img">
  <a href="img/vier.jpg" data-lightbox="Group-2">
    <img src="img/vier.jpg" alt="Vier" width="100" height="100" />
  </a>
</div>
</body>
</html>

<强> CSS

div.img {
height: auto;
width: auto;
float: left;
text-align:center;
}

div.img img {
    display: inline;
    margin: 5px;
    opacity: 0.5;
}

div.img a:hover img {
    opacity: 1;
}

div.clearfix{
clear:both;
}

（请注意，在关闭img标签之前应始终使用斜杠）

将DIV对齐居中并且彼此相邻

4 个答案:

Example