Solution to the problem that the vertical centering of flex inside button is not centered

Problem Description

The button style is icon + text. When using flex layout to vertically center it, the text and icon are not centered on the iPhone 7 phone, but displayed on the left. The code is as follows (simplified):

<button>
  <img src="./refresh.png" alt />
  {{ confirmButtonText }}
</button>

...
button {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
      width: 36px;
      height: 36px;
      display: inline-block;
  }
}

Expected style:

Actual style:

Solution

Wrap another layer of labels around the icon and text, and set the flex vertical center style for the outer label. The code is as follows:

<button>
  <span class="wrap">
     <img src="./refresh.png" alt />
      {{ confirmButtonText }}
  </span>
</button>

...
button {
   display: flex;
   align-items: center;
   justify-content: center;
  .wrap {
      img {
          width: 36px;
          height: 36px;
          display: inline-block;
      }
  }
}

This is the end of this article about how to solve the problem of flex vertical centering inside button not being centered. For more information about flex vertical centering inside button not being centered, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!