Auto centering the last image in the middle

HTML & CSS
1

How would I implement what I did here, on the last grid square?

I’m trying to figure this out.

How would I target the 4th square with this code?

border-spacing: 15px;


.gridcontainer {
  display: table;
  /* prevents space between inline-block elements */
  width: 352px;
  word-spacing: -.5em;
  /* prevents space between inline-block elements */
  background: black;
  border-right: 6px solid #38761d;
  border-bottom: 6px solid #38761d;
  margin: 0 auto;
}

.griditem {
  display: inline-block;
  vertical-align: top;
  /* aligns inline-block boxes to top - better than line height:0 in parent. */
  word-spacing: 0;
  /* prevents space between inline-block elements */
  border-left: 6px solid #38761d;
  border-top: 6px solid #38761d;
  width: 170px;
  height: 170px;
}

.picture1 {
  background-image: url(https://i.imgur.com/UMxeP0B.png);
  background-repeat: no-repeat;
  background-size: 170px 170px;
}

.picture2 {
  background-image: url(https://i.imgur.com/SjSUmlT.png);
  background-repeat: no-repeat;
  background-size: 170px 170px;
}

.picture3 {
  background-image: url(https://i.imgur.com/XzdF1mM.png);
  background-repeat: no-repeat;
}

.picture4 {
  background-image: url(https://i.imgur.com/iI7hHv9.png);
  background-repeat: no-repeat;
  background-size: 150px 150px;
}

<div class="gridcontainer">
  <div class="griditem picture1"></div>
  <div class="griditem picture2"></div>
  <div class="griditem picture3"></div>
  <div class="griditem picture4"></div>

</div>

https://i.imgur.com/5jegioo.png

2

Center it with bg position

.picture4 {
  background-image: url(https://i.imgur.com/iI7hHv9.png);
  background-repeat: no-repeat;
  background-size: 150px 150px;
  background-position: center;/*added this*/
}
3 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.