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

我希望“测试”和链接“1Dxit ..”在一行中，但左侧站点上的“测试”和链接居中。当我添加“display：inline;”时到h4标签，它给了我这个结果：https://dl.dropboxusercontent.com/u/37289435/prob-2.png

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

Answer 1

H4元素默认附加了边距。您不仅需要移除H4上的上边距，还需要给它一个等于跨度线高的负边距。

这样的事情：

http://jsfiddle.net/smnpL/

Answer 2

将此添加到您的css：

h4{
display:inline-block;
}

Answer 3

请参阅演示：

http://jsbin.com/becit/1

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .b {
        display:table;
        width:100%;
    }
    .b span {
        display:table-cell;
        vertical-align:middle;
        padding: 10px 5px 10px 10px;
    }
    .b h4 {
        padding: 10px 10px 10px 5px;
        word-break:break-all;
    }
    </style>

</head>

<body>

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

</body>

</html>

中心H4在div中没有断线

3 个答案:

中心H4在div中没有​​断线

3 个答案:

中心H4在div中没有断线