问题描述
在各个项目中遇到了我一直试图解决的一个问题,但在一段时间内运气不佳.
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 div
s 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问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!