search

bubkoo / html-to-image

✂️ Generates an image from a DOM node using HTML5 canvas and SVG.
MIT License
5.69k stars 531 forks source link

align-items and align-self property is not applying to flex container childrens after loading the image in ipads #307

Open LavanyaBurlagadda opened 2 years ago

LavanyaBurlagadda commented 2 years ago

Create a flex container and give align-items to the center and justify-content to center

Actually, all the items should be aligned to the center

But, all of the items were aligned flex-start after loading the image

iPad version 13.7

vivcat[bot] commented 2 years ago

👋 @LavanyaBurlagadda

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

thestevenmellor commented 1 year ago

Did you ever find a patch for this?

igor90 commented 11 months ago

Hey I have the similar Do you have the fix for it?

davidtovt commented 1 month ago

Hi. You can use margin on child elements instead of using align-items on the container.

For example:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  height: 100px;
}

.container .item {
  width: 20px;
  height: 20px;
  margin-top: auto;
  margin-bottom: auto;
  background: #f00;
}

.container .item:first-child {
  margin-left: auto;
}

.container .item:last-child {
  margin-right: auto;
}