移动Safari(iPhone)CSS垂直居中/行高CSS问题 [英] Mobile Safari (iPhone) CSS vertical centering/line-height CSS issues

问题描述

在各个项目中遇到了我一直试图解决的一个问题，但在一段时间内运气不佳.

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

我有一些div，其中的文本以display: block和line-height为中心，以CSS为中心.我还尝试了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浏览器的垂直中心的顶部偏移，这在任何Web浏览器中都没有(在桌面浏览器中完全垂直对齐).我可以在移动浏览器中将设置更改为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%;，但这似乎与这个问题无关.

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

到目前为止，我的解决方法是仅使用具有设置不同line-height的css的设备，但是正如您可以想象的那样，这是一个可怕的解决方案.

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.

推荐答案

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

This article has some great information on many different options for centering content when you don't know anything about the widths and heights:

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

它很好地基于user1002464的答案.

It builds on from user1002464's answer quite well.

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