我想知道如何将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.

最佳答案

将它们全部放在div中,然后将其居中。

10-05 21:04
查看更多