how do i center the bottom image?

Question

How do i center the very last image to align with middle column. All images are 300 * 100. Also, how do i make them stack on top of each other on screen size reducing? The bottom image keeps going to the right of the second row, and on resizing only columns one is visible, all other disappear. Please help

/* here's my css */

.images {
  margin-top: 1%;
  overflow: hidden;
  text-align: center;
  position: relative;
  width: 100%;
  left: 11%;
}

.row {
  display: flex;
  text-align: center;
  width: 100%;
}

.column {
  float: left;
  padding: 10px;
}

.bottom {}

<div class="images">
  <div class="row">
    <div class="column">
      <a>
        <img src="Types/arch.png" alt="Arch" />
        <p>Arch</p>
      </a>
    </div>

    <div class="column">
      <a>
        <img src="Types/beam.png" />
        <p>Beam</p>
      </a>
    </div>

    <div class="column">
      <a>
        <img src="Types/cable.png" />
        <p>Cable-Stayed</p>
      </a>
    </div>
  </div>

  <div class="row">
    <div class="column">
      <a>
        <img src="Types/canteliver.png" />
        <p>Cantilever</p>
      </a>
    </div>

    <div class="column">
      <a>
        <img src="Types/suspension.png" />
        <p>Suspension</p>
      </a>
    </div>

    <div class="column">
      <a>
        <img src="Types/tiedarch.png" />
        <p>Tied Arch</p>
      </a>
    </div>
  </div>

  <div class="row">
    <div class="column bottom">
      <a>
        <img src="Types/truss.png" />
        <p>Truss</p>
      </a>
    </div>
  </div>
</div>

For responsive repositioning of elements on big/small screens use a framework like Twitter Bootstrap — cymorg, May 26 '20 at 21:11

score 1 · Accepted Answer · answered May 26 '20 at 21:09

1

Add justify-content: center to your .row class. Is that what you're looking for?

.row {
  display: flex;
  text-align: center;
  width: 100%;
  justify-content: center;
}

A good resource for flexbox: Resource Link

answered May 26 '20 at 21:09

Dostrelith

922
5
13

how do i center the bottom image?

1 Answers1