如何使用CSS在Chrome和iPhone平台上一致地集中元素？

nvbavucw 于 2023-08-01 发布在 Go

关注(0)|答案(1)|浏览(72)

我现在真的很困惑，找不到任何关于它的东西：
这个代码--非常简单--将一个字母居中在一个圆圈中。问题是：在Chrome中，字母居中，但在iPhone上，不管是老款还是新款，字母 * 不再居中，而是降低了约7%*，因此不再位于圆圈的中间。
有没有人知道如何将字母（class=“kreiszahl”）居中，以便它在前端保持这种方式，即使在Apple智能手机上。

span.kreiskritik {
    float: left;
    margin-top: 5px;
    background: linear-gradient(to top right, FARBE1, FARBE2);
    font-family: Lora;
    font-size: 60px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-right: 15px;
    margin-bottom: 10px;
    position: relative;
    shape-outside: circle(50%)
}

span.kreiskritik .kreiszahl {
    position: absolute;
    color: FARBE_KREISZAHL;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 54px;
    text-align: center
}

字符串

google-chrome

来源：https://stackoverflow.com/questions/76589728/how-to-consistently-center-an-element-across-chrome-and-iphone-platforms-using

1条答案

按热度按时间

vuktfyat1#

好吧，在测试了几乎所有的东西之后（并且没有找到成功的行高或任何其他技巧），这是我的解决方案，它满足我99%* 因为Chrome之间的偏差，Safari，Firefox和iOS，以及桌面和智能手机之间，现在是最小的：

.kreiskritik {
  background: linear-gradient(to top right, FARBE1, FARBE2);
  border-radius: 50%;
  color: FARBE_KREISZAHL;
  font-size: 45px;
  height: 65px;
  width: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  float: left;
  margin-right: 10px;
  margin-top: 4px;
  shape-outside: circle(50%);
}

字符串

赞(0）回复(0）举报 2023-08-01

我来回答

如何使用CSS在Chrome和iPhone平台上一致地集中元素？

1条答案

相关问题

热门标签

最新问答