Card background not centered

Hello, I’d like to know if there’s a way to perfectly center a background on a expandable card.

As you can see here: The cards have a background image but it is not centered in any breakpoint. Just the card at the left when i’m at a hight breakpoint.

Any advice?

did you try with flex.

In tipography section on Framework7 web, you got the css for display-flex.

Yeah, the problem with expandable cards is that the image is set with <div style="background: uri(image.png)"></div> so I keep having the same problem even if I try to use flexbox

try with this


  .demo-card-header-pic .card-header {
  height: 175px;  //size of the div card 
  background-size: cover;
   background-position: center;
  color: #fff;

add class in <div class="card card-expandable>