【问题标题】:Mobile Safari (iPhone) CSS vertical centering/line-height CSS issues移动 Safari (iPhone) CSS 垂直居中/行高 CSS 问题
【发布时间】:2013-05-02 00:57:09
【问题描述】:

遇到了一个问题,我一直在尝试解决各种项目,但运气不佳。

我有一些divs,其中包含使用display: blockline-height 以CSS 为中心的文本。我还尝试了padding 和固定高度。通常,这些设置为只是标题,有时也设置为按钮。

无论哪种方式,我似乎总是在移动 safari 浏览器的顶部与垂直中心有一个偏移,这是我在任何网络浏览器中都没有的(它在桌面浏览器中完全垂直对齐)。我可以在移动浏览器中将设置更改为center,但这会排除所有其他浏览器,这是一种响应式设计。

有人遇到过这个问题吗?

我有-webkit-text-size-adjust: 100%;,但这似乎与这个问题无关。

到目前为止,我的破解工作是让设备只有 css 设置不同的line-height,但正如您可以想象的那样,这是一个可怕的解决方案。

【问题讨论】:

    标签: iphone css mobile mobile-safari


    【解决方案1】:

    当您对宽度和高度一无所知时,这篇文章提供了有关使内容居中的许多不同选项的一些重要信息:

    http://css-tricks.com/centering-in-the-unknown/

    它很好地基于 user1002464 的回答。

    【讨论】:

      【解决方案2】:

      您可以将display:table-cellvertical-align:middle 用于包含文本的div

      【讨论】:

      • 文本似乎不完全位于中心,垂直对齐为中间(有一个偏移量,因此它位于中心点下方)。有任何想法吗?背景图像位置的任何想法 - 在手机上也是不同的。
      • 你能不能提供一个 jsfiddle 的例子,这样我就可以知道到底是什么问题
      猜你喜欢
      • 2015-01-22
      • 2012-09-22
      • 2012-12-29
      • 2014-02-27
      • 1970-01-01
      • 1970-01-01
      • 2016-05-05
      • 2011-10-15
      • 2014-10-22
      相关资源
      最近更新 更多