移动Safari（iPhone）CSS垂直中心/线高CSS问题 [英] Mobile Safari (iPhone) CSS verticle centering/line-height CSS issues

问题描述

有一个问题，我一直在尝试解决没有多少运气一段时间在各种项目。

Got an issue I've been trying to solve without much luck for a while across various projects.

我有一些 div 和 line-height 显示 。我也尝试了 padding 和固定的高度。通常，这些设置只是标题，或有时是按钮。

I've got some divs with text inside that is centered with CSS using display: block and line-height. I also tried with padding and a fixed height. Typically, these are setup as either just headers, or sometimes buttons.

无论哪种方式，我总是似乎在移动safari浏览器我没有在任何网络浏览器（它是完全垂直对齐在桌面浏览器）。我可以在移动浏览器中将设置更改为 center ，但这会抛出所有其他浏览器，这是一种响应式设计。

Either way, I always seem to have an offset on the top from vertical center in the mobile safari browser that I don't get in ANY web browser (it's perfectly vertically aligned in a desktop browser). I can alter the setting to center in the mobile browser, but this throws out all the other browsers and this is a responsive design.

有人遇到过这个问题吗？

Has anyone experienced this issue?

我有 -webkit-text-size-adjust：100％ code>但是这似乎与这个问题没有关系。

I've got -webkit-text-size-adjust: 100%; but that doesn't seem to be related to this issue.

到目前为止我的黑客工作是有设备只有css设置不同的 line-height ，但你可以想象，这是一个可怕的解决方案。

So far my hack work around is to have devices only css which sets a different line-height, but as you can imagine, that's a horrible solution.

推荐答案

p>

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

它建立在user1002464的答案很好。

It builds on from user1002464's answer quite well.

这篇关于移动Safari（iPhone）CSS垂直中心/线高CSS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！