Center-Align Items In MaterializeCSS Row

Question

I am trying to align containers within a row created with the MaterializeCSS library. The documentation does not seem to mention anything regarding centering objects that are already within the row so I figured I would ask here.

Current code:

<div class="container" style="width: 88%;height: 100%;max-width: 100%;margin: auto;">

<div class="row" style="width: 100%;height: 100%;">

    <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img1.png">
    </div>

    <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img2.png">
    </div>

    <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img3.png">
    </div>

</div>

This is what it looks like currently:

What I would like (rough sketch):

Is there any CSS magic that can be performed so that this can be accomplished?

Much appreciated.

Answer 1

You can consider using flex box technique

.flexbox {
  display: flex;
  flew-wrap: wrap;
  justify-content: center;
  align-items: center;
}

<div class="container" style="width: 88%;height: 100%;max-width: 100%;margin: auto;">

  <div class="row" style="width: 100%;height: 100%;">

    <div class="flexbox">

      <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img1.png">
      </div>

      <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img2.png">
      </div>

      <div class="col s6 center-align" id="extra-pic-container">
        <img id="extra-pic" width="100%" src="img3.png">
      </div>
    </div>

  </div>