Question

我正在尝试将2个跨度垂直居中放置在一个div上，彼此重叠。我可以使用相对定位将它们垂直居中，但是问题是相同的CSS代码在mac os浏览器中对元素的定位不同。

这是在Windows上的外观-任何浏览器，相同的结果都是完美的 http://prntscr.com/mj2knr计数器5和文本的位置都很好。

这是在Mac OS http://prntscr.com/mj2llu上的任何浏览器上的外观我花了很多时间来纠正此问题，但一次只能在一个地方进行。

下面是我的HTML结构

<div class="avatar_image sl">
    <span class="nsl">5</span>
    <br>
    <span class="slt"> shares left </span>
</div>

相应的CSS是

.sl{
    background-color: #ff9466;
    color: #fff;
    height: 80px !important;
    width: 80px !important;
    border-radius: 100%;
    text-align: center;
    font-size: 10px;
    position: fixed;
    z-index: 1;
    top: -35px;
    right: -35px;
    font-family: fontMedium;
}
.nsl{
    font-size: 50px;
    position: relative;
    top: 20%;
}
.slt{
    font-size: 8px;
}

Answer 1

我尚未在Safari上对其进行测试，但请尝试一下，它在各个浏览器之间应更加一致。重置body / html上的padding和margin是可选的，您还可以根据需要调整容器尺寸。

body, html {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.sl{
  background-color: #ff9466;
  color: #fff;
  height: 80px;
  width: 80px;
  border-radius: 100%;
  font-size: 10px;
  z-index: 1;
  display: block;
  text-align: center;
  font-family: fontMedium;
}

.nsl{
  font-size: 50px;
  position: relative;
  top: 5%;
}

.slt{
  font-size: 8px;
  position: relative;
  bottom: 8%;
}

  <div class="container">
    <div class="avatar_image sl">
      <span class="nsl">5</span>
      <br>
      <span class="slt"> shares left </span>
    </div>
  </div>

无法跨不同的OS浏览器将元素放置在同一位置

1 个答案: