button内flex垂直居中竟然不居中的解决

问题描述：

在构建按钮样式时，我们采用了图标与文字结合的方式，并使用flex布局来实现垂直居中。在iphone7手机上，我们发现文字和图标并未如预期般居中，而是偏左显示。

以下是相关的代码片段：

```html

./refresh.png" alt />

{{ confirmButtonText }}

```

...

```css

button {

display: flex;

align-items: center;

justify-content: center;

img {

width: 3 6px;

height: 36px;

display: inline-block;

}

}

```

预期样式应该是图标和文字垂直居中，但实际在iphone7手机上却并非如此。

解决方式：

为了解决这个问题，我们可以给图标和文字再包裹一层标签，并对外层标签设置flex垂直居中样式。以下是修改后的代码：

```html

./refresh.png" alt />

{{ confirmButtonText }}

```

...

```css

button {

display: flex;

align-items: center;

justify-content: center;

}

.wrap {

display: flex; / 新增 /

align-items: center; / 使内部元素垂直居中 /

img { / 内部元素样式 /

width: 36px; / 修改宽度属性格式 /

height: 36px; / 保持高度不变 /

display: inline-block; / 保持元素独立显示 / 包裹标签解决flex布局不居中的问题 / } } / 关闭大括号 / 注释说明，方便理解代码意图 / } ``` 这就是解决button内flex垂直居中不居中的问题的方法。希望大家在以后的开发中如果遇到类似问题，可以尝试使用这种方式解决。对于更多的关于button内flex垂直居中的内容，可以搜索狼蚁SEO以前的文章或者浏览狼蚁网站的SEO优化相关文章。也希望大家多多支持狼蚁SEO！