Question

我想知道如何水平居中3幅图像。我知道如何让它们水平对齐，然后我放松了我的中心。所以我把图片水平排列，但我尝试了一切让它们居中，没有什么是真的有效。所以我真正想要的是让中间的一个居中，而另一个2放在它的一边，如果那样的话就是间距。

    <!DOCTYPE html>

           <html>
          <head>
         <title>Anchor</title>
          <link rel="stylesheet" href="main.css"    type="text/css"/>
         </head>
        <body>
         <div id="page">
         <div id="header">

        <h1 id="fhead">Used Clothes, Toys, and Micellaneous Items</h1>
        <p> Choose from the three items below</p>
    </div>
    <div id="body">
            <figure id="pic1">
        <a href="Pages/clothes.html"><img src="Images/faker.jpg" height="" width="" alt="Clothes"></a>
            <figcaption>Click picture to browse clothes</figcaption>
            </figure>
            <figure id="pic2">
        <a href="Pages/toys.html"><img src="Images/faker.jpg" height="" width="" alt="Toy"></a>
            <figcaption>Click picture to browse clothes</figcaption>
            </figure>
            <figure id="pic3">
                <a href="Pages/miscellaneous.html">]
                    <img src="Images/faker.jpg" height="" width="" alt="Misc">
                </a>
                <figcaption>Click picture to browse clothes</figcaption>
            </figure>
    </div>
    <div id="footer"> 

    </div>
    </div>
    </body>

   </html>

         Here is the css:

     #body {
      position: relative;
      width: 95%;
      }
     figure {
      float: left;
      text-decoration: none;
      }
    #pic3 {
     position: absolute;
     right: 0;
     clear: left;
     }

   figcaption {
    border: 1px solid red;
    border-radius: 10px;
    padding: 10px;
    }


      So I have the pictures lined up horizontally, but I tried everything                   to get them centered and nothing is really working. So what I really want is for the middle one to be centered and the other 2 to be on the side of it with even spacing if that makes since.

Answer 1

将它们全部放入div中，然后将该div放在中心。

Answer 2

如果您可以为其发布代码，那将会有很大帮助。但是从我正在阅读的内容中，您知道如何水平对齐它。有很多方法可以做到这一点，例如css inline-block或<table>，但如果您使用css inline-block，我相信它不会删除居中。

如何水平对齐3个图像并使它们居中

2 个答案: