Question

Heyo，

我想知道Apple Watch menu中的center图片是否有办法。假设我在<div id="gallery">的中心有一个图像。 div的宽度和高度与content的宽度和高度相同。因此，当我将另一个图像放入div时，容器会展开，但所有图像仍然居中。

通常大多数画廊都是这样的：

或者：

但我希望画廊看起来像这样：

我有什么办法可以用Javascript/jQuery，CSS和HTML来制作吗？

以下是我当前的HTML代码：

<div id="gallery">
  <div class="image">
    <img src="image.png">
  </div>
  <div class="image">
    <img src="image.png">
  </div>
  <div class="image">
    <img src="image.png">
  </div>
  ...
</div>

这是我当前的CSS代码：

#gallery {
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 1

＆＃13;

.row {
  display: flex;
  justify-content: center;
}

.item {
  width: 100px; 
  height: 100px;
  background-color: blue;
  margin-left: 5px;
  margin-bottom: 5px;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

＆＃13;

您可以使用display：flex和justify-content：center来实现

Answer 2

您可以使用display:inline-block属性尝试这种简单的方法：

<html>
<style>
.gallery {
    text-align: center;
}
.image {
    width:100px;
    height:100px;
    background:green;
    display: inline-block;
}
</style>
<body>
<div class="gallery">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>  

<div class="gallery">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>  

<div class="gallery">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>  

<div class="gallery">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>  

<div class="gallery">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>  
</body>
<html>

像Apple Watch菜单中的图像居中

2 个答案: