Question

我试图使用弹性框垂直居中图像。

这是我的代码：

<ion-grid>
    <ion-row>
      <ion-col>
        <div class="logo-part">
          <img id="logo" src="assets/logo/logo.png" alt="img-logo">
          <ion-title>Service at your fingertips!</ion-title>
        </div>
      </ion-col>
    </ion-row>
</ion-grid>

CSS：

ion-content ion-grid {
  height: 100%;
}
ion-content ion-row{
  height: 50%;
}
div.logo-part {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
img{
width:25%;
text-align:center;
}

图像没有垂直定位在中心位置！

请帮忙吗？

感谢。

Answer 1

由于flex-direction: column因使用此align-items，justify-content: center开始水平对齐而不是垂直对齐，要垂直对齐，您需要设置[mapView selectAnnotation:annotationName animated:YES];

只是为了解释这种行为：这是因为对齐内容根据主要方向对齐，并根据交集对齐项目。因此，当您将flex（方向）从行（水平）更改为列（垂直）时，justify-content垂直对齐并水平对齐项目。 - Rodrigo Ferreira

如何使用弹性框垂直居中图像？

1 个答案: