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

时间：2018-08-27 20:27:45

标签： html css html-table portfolio

建立投资组合时出现问题。因此，我将照片放在桌子内，并将它们放在CSS的中央。由于某些原因，当我添加标题和带有新照片的新表时，由于某种原因，新表未居中。当我在选项卡上打开它并使它变小时，它会居中，但当它尽可能大时，它会变得居中。我该如何解决？这是我的代码：

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>

2 个答案:

答案 0 :(得分：0)

下面的示例如何。我认为它看起来更干净，反应灵敏且易于维护。

.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>

答案 1 :(得分：0)

我认为 style.css 中的 img 属性阻止了第二个表格居中，所以我们在这里检查我的编辑代码

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;
}
相关问题
最新问题