Solution 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

Problem :

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>

Comments

Comment posted by John

you can add

Comment posted by cymorg

For responsive repositioning of elements on big/small screens use a framework like Twitter Bootstrap

Comment posted by Jack William

thank you. that worked

Comment posted by Dostrelith

You’re welcome!

By

Leave a Reply

Your email address will not be published. Required fields are marked *