CODEWITHSUNDEEP
htmlcss
Tbaustin
Tbaustin

Reputation: 133

How to align 3 images horizontally and center them

I want to know how to center 3 images horizontally. I know how to get them aligned horizontally but then I loose my centering. 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.

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

Upvotes: 0

Views: 1763

Answers (2)

kzhao14
kzhao14

Reputation: 2630

If you could post your code for it, that'd help a lot. But from what I'm reading, you know how to align it horizontally. There are many ways to do that, such as css inline-block, or a <table>, but if you were to use css inline-block, I believe it would not remove the centering.

Upvotes: 0

Angels
Angels

Reputation: 230

Put them all in div and then center that div.

Upvotes: 1

Related Questions