Search code examples
cssimagepolymeralignmentpolymer-2.x

I am trying to build a polymer site and I am wondering how to set the iron-image element at the center

Here is my code

<iron-image style="width:500px; height:400px; background-color: lightgray;"
    sizing="cover" preload fade src="images/1.jpg"></iron-image>
<iron-image style="width:500px; height:400px; background-color: lightgray;"
    sizing="cover" preload fade src="images/2.jpg"></iron-image>

This is the output of the code, I'm trying to make it on the center:

Output

Solution

  • use iron-flex-layout

    <custom-style>
  <style is="custom-style">
    .flex-center-justified {
      @apply --layout-horizontal;
      @apply --layout-center-justified;
    }
  </style>
</custom-style>

<div class="container flex-center-justified">
  <iron-image style="width:500px; height:400px; background-color: lightgray;"
    sizing="cover" preload fade src="images/1.jpg"></iron-image>
  <iron-image style="width:500px; height:400px; background-color: lightgray;"
    sizing="cover" preload fade src="images/2.jpg"></iron-image>
</div>