css - 在所有视口(viewport)上设计一个组件响应

Question

组件:

my-profile.html

<div class="presentation margin-left-150">
  <img src="./assets/images/img1.jpg" alt="Image" />
  <p>Hilda Isable Sanchez</p>
  <p>186579</p>
  <p>hilda.sanchez.gmail.com</p>
  <p>800.457.5687</p>
</div>

my-profile.scss

my-profile {
    .presentation {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        img {
            width: 30%;
            height: 30%;
        }
        .margin-left-150{
          margin-left: 150px;
        }
    }
}

页面:

settings.html

<ion-content class="content">
  <ion-grid no-padding>
    <ion-row class="header">
      <ion-col col-6>
        <my-profile></my-profile>
      </ion-col>
    </ion-row>
    <ion-row class="details">
      <ion-col col-12>

      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

settings.scss

page-settings {
    .content {
        ion-grid {
            height: 100%;
        }
        .header {
            flex: 1;
            background-color: color($colors, secondary);
        }
        .details {
            flex: 2;
        }
    }
}

它在如下移动设备上看起来不错:

但在 iPad 上可怕:

你能帮我在设备的所有视口(viewport)上正确设计吗？换句话说，my-profile.html 组件在所有设备尺寸(响应能力)上都很好地居中。

注意:我知道这是由于 margin-left-150 而发生的。但是我怎样才能正确地将它居中呢？

Answer 1

要使 inline-block 元素水平居中，您可以将其父元素设置为 text-align: center

我还从 presenation 中删除了 width: 100% 否则它不会居中成为其父级的全宽

我的个人资料.html

<div class="presentation">
  <img src="./assets/images/img1.jpg" alt="Image" />
  <p>Hilda Isable Sanchez</p>
  <p>186579</p>
  <p>hilda.sanchez.gmail.com</p>
  <p>800.457.5687</p>
</div>

我的个人资料.scss

my-profile {
    text-align: center;
    .presentation {
        position: relative;
        display: inline-block;
        height: 100%;
        overflow: hidden;
        text-align: left;            /*  reset to left align  */
        img {
            width: 30%;
            height: 30%;
        }
    }
}

---

另一个选择当然是 Flexbox。有了这个，您还可以降低 height: 100% 作为行方向的 flex 元素，默认情况下填充其父项的高度(align-items: stretch)。

我的个人资料.html

<div class="presentation">
  <img src="./assets/images/img1.jpg" alt="Image" />
  <p>Hilda Isable Sanchez</p>
  <p>186579</p>
  <p>hilda.sanchez.gmail.com</p>
  <p>800.457.5687</p>
</div>

我的个人资料.scss

my-profile {
    display: flex;
    justify-content: center;
    .presentation {
        position: relative;
        overflow: hidden;
        img {
            width: 30%;
            height: 30%;
        }
    }
}