文本居中跨浏览器问题答案

【问题标题】：Text centering cross-browser issue文本居中跨浏览器问题
【发布时间】：2012-05-17 12:24:32
【问题描述】：

我看不出什么会控制文本在不同计算机上偏移，如下所示。一个正确地位于蓝色区域的中心，另一个似乎以某种方式偏移。它发生在文本字段和按钮中。直播现场：http://www.muuzik.me:8000

【问题讨论】：

你有一些invalid HTML。在<html></html> 标签之外还有一个<script>，这是无效的结构。除了顶部的 doctype 之外，任何内容都不应位于 html 标记之外，在您的情况下，它是缺失的。

【解决方案1】：

关键在于调整该元素周围的填充。目前，顶部有 18px 的内边距，底部有 4px 的内边距。这不平衡，因此文本不会垂直居中。要使其水平居中，请确保左右填充相同；要使其垂直居中，请确保顶部和底部填充相同。

您可以使用速记声明来创建这种效果可能会有所帮助： padding: 10px 20px; 将设置 top & bottom 为 10px，left & right 为 20px。

【讨论】：

但问题在于，这不仅仅是填充正确与否的情况，不同的浏览器将文本居中/不居中，无论设置了什么填充
如果内边距太小，在某些浏览器中可能会被忽略。将填充设置为相等后，您在哪些浏览器上遇到问题？
这台计算机（未将文本居中的计算机）使用的是 chromium 19.0.1084.46，但另外两台 chrome 计算机将其居中。
我只是想知道什么 css 属性可以让你在那个蓝色区域内居中文本（即不填充）
我无法复制您在 chrome 中看到的内容，但我可以在 IE 中复制。问题不在于填充不起作用：而是背景没有被扩展以填充填充扩展的所有内容。而且我不相信有一个 css 属性可以在没有正确设置填充的情况下居中。

【解决方案2】：

我认为这是填充设置。看到绿色区域了吗？那些是填充物。您当前的填充是

 padding-top:14px; 
 padding-right:18px 
 padding-bottoem:4px;
 padding-left:18px;

这就是为什么文本不在中心显示的原因；您可以尝试将填充设置为

 padding: 12px;

我试过了，它适用于 Chrome 和 Firefox

【讨论】：

【解决方案3】：

您应该显示整个 CSS，但您是否尝试将 text-align: center; 和 line-height: 46px 设置为按钮？

【讨论】：