两张桌子，另一张不居中？

Question

我在构建我的作品集时遇到了问题。所以我将我的照片放在 table 中，并将它们放在 css 的中心。出于某种原因，当我添加 header 和带有新照片的新 table 时，新的 table 由于某种原因没有居中。当我在选项卡上打开它并使选项卡变小时，它会居中，但当它尽可能大时，它不会。我该如何解决？这是我的代码：

td {
  list-style-image: none;
  list-style-type: none;
  margin: auto;
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

tr {
  padding: 0;
  text-align: center;
}

.gallery:hover {
  -webkit-box-shadow: 2px 1px 20px 4px #707070;
  margin: 0;
  padding: 0;
  box-shadow: 2px 1px 20px 4px #707070;
}

img {
  width: auto;
  height: 200px;
  text-align: center;
  clear: none;
  float: left;
  padding: 0;
  margin: 0;
}

h1 {
  text-align: center;
  font-family: changa-one;
  font-style: normal;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 0;
  font-weight: 400;
  text-transform: uppercase;
}

<h1>Photography</h1>
<table>
  <tbody>
    <tr>
      <td><a href="img/1_big.jpg" target="_blank"><img src="https://placehold.it/500x500" alt="" width="500" height="500" class="gallery"/></a></td>

      <td><a href="img/2_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

      <td><a href="img/3_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

      <td><a href="img/4_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

      <td><a href="img/5_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

      <td><a href="img/6_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

      <td><a href="img/8_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

      <td><a href="img/9_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

      <td><a href="img/10_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

      <td><a href="img/11_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

      <td><a href="img/12_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

      <td><a href="img/13_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
    </tr>
  </tbody>
</table>

<h1>Websites</h1>

<table>
  <tbody>
    <tr>
      <td><a href="webs1/index.html" target="_blank"><img src="https://placehold.it/500x500" alt="" width="500" height="500" class="gallery"/></a></td>

      <td><a href="webs2/index.html" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

      <td><a href="webs3/index.html" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

      <td><a href="webs4/index.html" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
    </tr>
  </tbody>
</table>

Answer 1

下面这个例子怎么样。我认为它看起来更简洁，反应灵敏且更易于维护。

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, max-content));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-content: center;
    width: 70%;
    margin: 0 auto;
}

.gallery a {
    display: block;
    grid-column-start: auto;
}

.gallery a:hover {
  box-shadow: 2px 1px 20px 4px #707070;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
}

h1 {
  text-align: center;
  font-family: changa-one;
  font-style: normal;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 0;
  font-weight: 400;
  text-transform: uppercase;
}

<h1>Photography</h1>
<div class="gallery">
    <a href="img/1_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/2_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/3_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/4_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/5_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/6_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/8_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/9_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/10_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/11_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/12_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/13_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>
</div>

<h1>Websites</h1>

<div class="gallery">
    <a href="webs1/index.html" target="_blank"><img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg"></a>

    <a href="webs2/index.html" target="_blank"><img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg"></a>

    <a href="webs3/index.html" target="_blank"><img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg"></a>

    <a href="webs4/index.html" target="_blank"><img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg"></a>
</div>

Answer 2

我认为 img 属性 style.css 阻止了居中秒 table 所以我们去检查我的编辑代码

td {
    list-style-image: none;
    list-style-type: none;
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

tr {
    padding: 0;
    text-align: center;
}

.gallery:hover {
    -webkit-box-shadow: 2px 1px 20px 4px #707070;
    padding: 0;
    box-shadow: 2px 1px 20px 4px #707070;
}

img {
    width: 200px;
    height: 200px;
    clear: none;
}

h1 {
    text-align: center;
    font-family: changa-one;
    font-style: normal;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 0;
    font-weight: 400;
    text-transform: uppercase;
}

.center-table {
    width: 100%;
    margin: 0 auto;
}

<h1>Photography</h1>
<table>
    <tbody>
        <tr>
            <td><a href="img/1_big.jpg" target="_blank"><img src="https://placehold.it/500x500" alt="" width="500" height="500" class="gallery"/></a></td>

            <td><a href="img/2_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/3_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/4_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/5_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/6_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/8_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/9_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/10_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/11_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/12_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/13_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
</tr>
</tbody>
</table>

<h1>Websites</h1>

    <table class="center-table">
        <tbody>
            <tr>
                <td><a href="webs1/index.html" target="_blank"><img src="https://placehold.it/500x500" alt="" width="500" height="500" class="gallery"/></a></td>

                <td><a href="webs2/index.html" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

                <td><a href="webs3/index.html" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

                <td><a href="webs4/index.html" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            </tr>
        </tbody>
    </table>

我为属性 table 添加了 class

.center-table {
    width: 100%;
    margin: 0 auto;
}

两张桌子，另一张不居中？

Two tables, other one doesn't stay centered?

html

css

html-table

portfolio