【问题标题】:Top:50% css not working in safari but it is working in chrome顶部:50% css 不能在 safari 中工作,但它在 chrome 中工作
【发布时间】:2021-09-22 21:43:26
【问题描述】:

我正在尝试将 div 中的文本(h1)以角度居中对齐。文本在 Chrome 中正确对齐,但在 Safari 中无法正常工作。我假设 top:50% 不在 safari 中工作。 提前致谢。

当前的 CSS:

h1{
  font-weight: bold;
  text-align: center;
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

参考图片供您参考:

铬:

Safari:

【问题讨论】:

标签: html css


【解决方案1】:

改用align-self: center

h1{
  font-weight: bold;
  text-align: center;
  margin: auto;
  position: relative;
  -webkit-align-self: center; //safari 7+
  align-self: center;
}

【讨论】:

  • 谢谢!我试过但没有工作。结果还是一样
【解决方案2】:

试试这个-webkit-align-self: center;

h1{
  font-weight: bold;
  text-align: center;
  margin: auto;
  position: relative;
  top: 50%;/*remove this*/
  transform: translateY(-50%);/*remove this */
  -webkit-align-self: center; //safari 7+
  align-self: center;
}

【讨论】:

  • 谢谢!我试过但没有工作。结果还是一样
  • Safari 是最新的吗?
【解决方案3】:

你不需要使用位置属性来做你需要的事情。 如果你使用flexbox properties,你可以做同样的事情,但可能没有 safari 奇怪的行为。

我不建议像其他答案建议的那样使用浏览器扩展来使用 CSS hacks

看看我的例子

div {
  height: 100px;
  border: solid 1px #f00;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div>
  <h1>some text</h1>
</div>

PS:边框和高度属性仅用于可视化目的,您不需要使用它们

【讨论】:

  • 感谢您的信息!但它并不完全垂直居中。
猜你喜欢
  • 1970-01-01
  • 2016-11-26
  • 1970-01-01
  • 2013-12-26
  • 2019-12-06
  • 2023-03-28
  • 1970-01-01
  • 1970-01-01
  • 2017-07-28
相关资源
最近更新 更多