html - 在没有换行的情况下将 H4 居中放置在 div 中

Question

我有以下代码:

<div style="border: 1px solid rgba(51, 51, 51, 0.4); background: rgba(51, 51, 51, 0.1); padding: 10px;">
    <span>Test</span>
    <h4 class="heading" style="text-align: center;">
        <a href="bitcoin:1DxitRffAqwXju71aF2HoHNBfjjLQFcAw3">1DxitRffAqwXju71aF2HoHNBfjjLQFcAw3</a>
    </h4>
</div>

这给了我这个结果:https://dl.dropboxusercontent.com/u/37289435/prob-1.png

我希望“Test”和链接“1Dxit..”在一行中，但“Test”位于左侧站点且链接居中。当我添加“显示:内联；”到 h4 标签，它给了我这个结果:https://dl.dropboxusercontent.com/u/37289435/prob-2.png

它是内联的，但链接不再居中。有什么问题，我该如何解决？

Answer 1

H4 元素默认附加了边距。您不仅需要移除 H4 上的上边距，还需要为其设置一个等于跨度行高的负边距。

像这样:

http://jsfiddle.net/smnpL/