How to move elements around page

Question

Currently, my webpage just consists of four images; two side-by-side. At the moment, they're all four off to the left side of the page and I would like to center them to the middle. I am currently using margin-top for its distance from the top of the page, so I am also using margin-left, right, etc. My elements stay in place when resizing my browser(which is what I wanted), but I can't move them to the center no matter how many times I change the left and right pixels.

body {
  padding: 0px;
  margin: 0px;
}

#dLand {
  display: inline-block;
  margin-top: 200px;
  margin-left: auto;
  margin-right: auto;
}

#sunset {
  display: inline-block;
  margin-top: 200px;
  margin-left: auto;
  margin-right: auto;
}

#griff {
  display: inline-block;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
}

#samo {
  display: inline-block;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
}

<div id='container'>

  <img id='dLand' src='img/calidisney.jpeg' alt='Disneyland, CA' style='width: 40%'>

  <img id='sunset' src='img/sunset.jpg' alt='Sunset Strip' style='width: 40%'>

  <img id='griff' src='img/griffith.jpg' alt='Griffith Observatory' style='width: 40%'>

  <img id='samo' src='img/samopier.jpg' alt='Santa Monica Pier' style='width: 40%'>

</div>

score 1 · Answer 1 · answered Oct 09 '19 at 18:30

Try this one but if you want to display all images inline in mobile view use @media queries to archive that.

    div#container {
        margin-top: 200px;
        width:100%;
        text-align:center;
    }
    div.pic{
        display:inline-block;
    }

    <div id="container">
        <div class="pic"><img id='dLand' src='https://picsum.photos/id/237/200/300' alt='Disneyland, CA' ></div>
        <div class="pic"><img id='sunset' src='https://picsum.photos/id/237/200/300' alt='Disneyland, CA' ></div>
        <div class="pic"><img id='griff' src='https://picsum.photos/id/237/200/300' alt='Disneyland, CA' ></div>
        <div class="pic"><img id='samo' src='https://picsum.photos/id/237/200/300' alt='Disneyland, CA' ></div>
    </div>

see this in full-page.

if the answer is correct please vote and put the correct mark that will be better for this community and me. — Dhanushka sasanka, Oct 09 '19 at 19:03

score 1 · Answer 2 · answered Oct 09 '19 at 18:31

1

There are different ways to center things, one technique is to set #container top and left to 50%, then transform: translate(-50%,-50%)

answered Oct 09 '19 at 18:31

Ted Fitzpatrick

910
1
8
18

score 0 · Answer 3 · answered Oct 09 '19 at 18:52

You may use flex to center and wrap them:

html {
  min-height: 100%;
  display: flex;
}

body {
  /* or any wrapper within a flex or not parent*/
  width: 80%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

img {
  width: 50%;
}

<img src="http://dummyimage.com/200x100/a0f">
<img src="http://dummyimage.com/200x100/bad">
<img src="http://dummyimage.com/200x100/def">
<img src="http://dummyimage.com/200x100/f00">

How to move elements around page

3 Answers3