CODEWITHSUNDEEP
cssflexbox
n00bly
n00bly

Reputation: 395

CSS scale image & align center

I have a row width 8 divs next to each other. The container has:

display: flex;
flex-wrap: wrap;

The items in the container:

text-align: center;
flex: 1 1 0;
width: 0;

The images inside the item:

-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);

All the items have a image inside, now I need to align those images in the center of the div. But (I think) because of the scale code, it doesn't align them exactly in the center... Is there something to fix this?

Regards

Upvotes: 0

Views: 670

Answers (1)

James Coyle
James Coyle

Reputation: 10398

You can just make the items flex containers and center the content like so:

.flex {
  display: flex;
  flex-wrap: wrap;
}

.item {
  border: 1px solid red; /* just so we can see the border */
  text-align: center;
  flex: 1 1 0;
  width: 0;
}

.image {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
}

.fixed .item {
  display: flex;
  justify-content: center;
  align-items: center;
}
<h1>Original</h1>
<div class="flex">
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
</div>

<h1>Fixed</h1>
<div class="flex fixed">
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
  <div class="item">
    <img class="image" src="https://picsum.photos/100" />
  </div>
</div>

Upvotes: 1

Related Questions