如何在iOS和Android屏幕中间(垂直和水平)对齐离子卡?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在iOS和Android屏幕中间(垂直和水平)对齐离子卡?相关的知识,希望对你有一定的参考价值。

如何在屏幕中间(垂直和水平)对齐离子卡?

ios模拟器上进行调试会显示卡,但左侧的边距比右侧更多。所以没有真正集中。要正确居中我必须left: 47.5%;而不是left: 50%

  • 简单的离子卡 <ion-card class="error"> <ion-card-header class="error-header"> <ion-icon name="error"></ion-icon> Error </ion-card-header> <ion-card-content class="error-body"> Error occurred! </ion-card-content> </ion-card>
  • 样式在sass文件中 .error { transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; position: absolute; .error-header { position: relative; text-align: center; top: 36%; font-size: 3.0em; width: 100%; font-weight: bold; color: red; } .error-body { font-size: 1.0em; text-align: center; position: relative; top: 52%; width: 100%; } }
答案

IMO应该检查你的css

    .error {

 transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    position: absolute;
     } // close here

.error-header {
  position: relative;
  text-align: center;
  top: 36%;
  font-size: 3.0em;
  width: 100%;
  font-weight: bold;
  color: red;
}

.error-body {
  font-size: 1.0em;
  text-align: center;
  position: relative;
  top: 52%;
   width: 100%;
}

// 不在这里

如果不知道卡的大小,那么就像尝试一样固定位置

   .error {

 transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    position: fixed;
     }

如果你设置固定位置然后尝试

 .error {

 transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
     }

要么

你可以通过this更好

另一答案

.error {width:50%;身高:自动;保证金:自动; }

另一答案

您需要在一行中添加XY坐标

transform: translate(-50%, -50%);

以上是关于如何在iOS和Android屏幕中间(垂直和水平)对齐离子卡?的主要内容,如果未能解决你的问题,请参考以下文章

Android开发点滴 - 如何使按钮水平垂直居中且始终占据屏幕宽度一半

Android:如何让LinearLayout的background在整个屏幕中心显示

Flutter 如何使用 ListView 水平和 GridView 垂直滚动屏幕

图像 <a> 垂直和水平对齐中心并在两者中都使用 % 调整大小

iOS 自动布局 >> 视图没有改变它的大小

使用CSS垂直和水平对齐(中间和中心)[重复]