组件:
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
而发生的。但是我怎样才能正确地将它居中呢?
最佳答案
要使 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%;
}
}
}
关于css - 在所有视口(viewport)上设计一个组件响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45789420/