html - 如何使图库居中

Question

我需要帮助来使我的图片库居中，但我不能让它按我想要的方式工作，装订线很麻烦，所以计算边距和宽度也是如此。我希望图片居中，所以每行三张图片，一张图片一直在左边，第二张图片居中，第三张图片一直在右边，单独使用边距和填充 float 我认为是一种不好的做法，必须有更好的方法来做到这一点。每张图片的宽度为 295px 我在 photoshop 中更改了它们的宽度。我不想使用 css 网格、flexbox 等……我只想用基本的方式用 float 和盒子模型来做。如果有任何好的方法可以使这些图像居中并在它们之间留出一些空间。

/* CSS Document */


/*body {
	margin: 20px 250px;
}*/

#wrapper {
  width: 1000px;
  margin: 20px auto;
}

header {
  background-image: url("../Images/view2.jpg");
  background-repeat: no-repeat;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 20px;
}

header #navbar {
  margin-top: 35px;
}

#navbar a {
  padding: 30px 35px;
}

header h1 {
  margin: 0;
}

main {
  background: rgba(211, 204, 38, 1.00);
  overflow: hidden;
  padding: 20px;
}

main #page {
  text-align: center;
}

main #inner-content ul {
  list-style: none;
}

main #inner-content {
  overflow: hidden;
  padding-left: 17.7px;
}

main #inner-content #block1 {
  float: left;
  padding: 0;
  width: 33.33%;
}

main #inner-content #block2 {
  float: left;
  padding: 0;
  width: 33.33%;
}

main #inner-content #block3 {
  float: left;
  padding: 0;
  width: 33.33%;
}

main #inner-content #block1 li {
  margin-left: 12.5px;
}

main #inner-content #block2 li {
  margin-left: 12.5px;
}

main #inner-content #block3 li {
  margin-left: 12.5px;
}

#about-text {
  margin-bottom: 50px;
  text-align: center;
}

footer {
  background: rgba(96, 96, 96, 1.00);
  padding: 20px;
  overflow: hidden;
  clear: left;
}

footer #contact {
  float: left;
  margin-left: 200px;
}

footer #form {
  float: right;
  margin-right: 200px;
}

<div id="wrapper">

  <header id="header">
    <h1>ISMAR PHOTOGRAPHY</h1>
    <nav id="navbar">
      <a href="#">HOME</a>
      <a href="#">ABOUT</a>
      <a href="#">SERVICES</a>
      <a href="#">CONTACT</a>
      <a href="#">PORTFOLIO</a>
    </nav>
  </header>

  <main>

    <p id="about-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error aspernatur vitae illo animi aliquam perferendis dicta, temporibus, dolores suscipit accusantium cumque voluptas nesciunt pariatur numquam omnis quo sunt minus voluptatum vero odio
      ipsam mollitia. Itaque consequatur non harum molestias quibusdam voluptatem provident, eius, aliquam magnam, nesciunt ipsum est maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed beatae veritatis provident expedita facere dolore
      saepe autem cupiditate voluptas assumenda enim odit illum et placeat amet officiis, accusamus adipisci veniam, hic. Velit fugiat vitae, laboriosam omnis voluptates rem, totam esse quisquam sunt hic voluptatum amet quam repudiandae sequi incidunt
      nam!</p>

    <p id="page">01</p>

    <div id="inner-content">

      <ul id="block1">
        <li><img src="Images/nature.jpg"></li>
        <li><img src="Images/panorama.jpg"></li>
        <li><img src="Images/self.jpg"></li>
      </ul>


      <ul id="block2">
        <li><img src="Images/self2.jpg"></li>
        <li><img src="Images/sky.jpg"></li>
        <li><img src="Images/telex.jpg"></li>
      </ul>

      <ul id="block3">
        <li><img src="Images/urban-beatz.jpg"></li>
        <li><img src="Images/urban-beatz2.jpg"></li>
        <li><img src="Images/view.jpg"></li>
      </ul>
    </div>


  </main>

  <footer>
    <div id="contact">
      <h2>CONTACT ME</h2>
      <p>randomemail@gmail.com</p>
      <p>+456 34 55 5567</p>
    </div>


    <form action="#" name="form" id="form">
      <label for="name">Name</label><br>
      <input type="text" id="name"><br>
      <label for="last-name">Last name</label><br>
      <input type="text" id="last-name"><br>
      <label for="email">Email</label><br>
      <input type="text" id="email"><br>
      <label for="message">Message</label><br>
      <input type="text" id="message"><br>
    </form>
  </footer>
</div>

Answer 1

好吧，如果你不想使用 grid 或 flexbox，那么我建议 old school table 是个不错的选择。

.my-table {
  width: 100%;
}

.my-table td {
  /* Change this padding to add gutters of desirable size*/
  padding: 20px;
}

.my-table img {
  width: 100%;
  height: auto;
}

<table class="my-table">
  <tr>
    <td><img src="image_1_location.jpg" /></td>
    <td><img src="image_2_location.jpg" /></td>
    <td><img src="image_3_location.jpg" /></td>
  </tr>
  <tr>
    <td><img src="image_4_location.jpg" /></td>
    <td><img src="image_5_location.jpg" /></td>
    <td><img src="image_6_location.jpg" /></td>
  </tr>
</table>

选项 2

如果需要，还有另一种方法可以使用 float 实现此目的。

唯一的问题是您必须制作多个容器来容纳浮标。

这是你可以做到的

.my-image-gallery {
  position: relative;
}

.clearfix:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.floating-element {
  float: left;
  width: 33.33%;
}

.image-container {
  padding: 10px;
}

.image-container>img {
  width: 100%;
  height: auto;
}

<div class="my-image-gallery">
  <div id="row-1" class="clearfix">
    <!-- You'll need to make a container for each image -->
    <div class="floating-element">
      <div class="image-container">
        <img src="google-logo.png" />
      </div>
    </div>
    <div class="floating-element">
      <div class="image-container">
        <img src="google-logo.png" />
      </div>
    </div>
    <div class="floating-element">
      <div class="image-container">
        <img src="google-logo.png" />
      </div>
    </div>
  </div>
</div>