如何使h2适合iPhone大小的设备

Question

我在iPhone大小的设备上遇到了h2这个问题。尽管代码看起来很好，但h2离开了中心。我无法弄清楚它为什么会发生。

h2 off center

这是我的代码：

LazyInitializationException

我的网站是：mamufka.com。

很想听听有经验的家伙的一些提示！

Answer 1

看起来对我很好，但是如果你想让它水平对齐，你应该从左边和右边删除边距：

h2 {
  margin-left: auto;
  margin-right: auto;
}

由于这个余量，文本实际上比你给他们的空间大。

Answer 2

您的h2元素有一般规则，导致边距在集中对齐之前与边碰撞。

试试这个：

@media only screen and (max-device-width: 480px) { 
h2 { font-size: 2em; margin: 0 0 1.5em 0; text-align: center }
}

Answer 3

请从h2中删除左/右边距

h2 { font-size: 2em; margin: 0 0 1.5em; text-align: center }

Answer 4

减少@media only screen and (max-device-width: 480px){ h2 { margin: 2em 0em 0 0em; font-size: 2em; margin-bottom: 1.5em; text-align: center; } } 次查询的余量。像这样：

{{1}}