Html 如何在按钮旁边将此文本居中对齐？

屏幕截图

html

<div class="client-box">
  <div class="box-header clearfix">
    <h6 class="pull-left">General Information</h6>
    <button class="btn btn-small pull-right"><i class="icon-pencil"></i> Edit</button>
  </div>
  <p>box content</p>
</div>

一般资料
编辑
盒子内容

如何使标题相对于编辑按钮垂直居中

---

将

垂直对齐

放在

箱头上

不起作用。我不想硬编码行高，因为我可能会在以后更改按钮大小或其他东西，然后它会断开。

是的..垂直对齐在css中一直是个问题。因此，我建议您设置框标题的边距顶部。。。 如页边距顶部：1px。。 调整箱收割台wrt margin top将解决此问题。

---

您还可以使用Firefox中的Firebug检查设置页边距顶部所需的像素数。

如果您不想硬编码，可以尝试动态设置

$(function () {
  $('h6.pull-left').css('line-height', $('button.btn.pull-right').outerHeight() + 'px');
});

---

我创建了一个您正在使用的

pull right

和

pull left

将元素左右浮动，因此在这种情况下垂直对齐将不起作用。你能做的最好的事情就是使用填充物，或者按照其他人的建议，将

h6

元素上的

line height

设置为24px。是的，

垂直对齐：中间

充其量是不连续的，对于那些追求像素完美的人来说永远不会满意

你可以使用css

显示：表格

和

显示：表格单元格

和

垂直对齐：中间

HTML

<div class="box-header clearfix">
    <div class="left-cell">
        <h6>General Information</h6>
    </div>
    <div class="right-cell">
        <button class="btn btn-small"><i class="icon-pencil"></i> Edit</button>
    </div>
</div>

---

垂直对齐

仅适用于两种类型的对象：1，表格单元格和2，内联元素

它与任何其他类型的HTML元素都没有关系

这并不是说它“不稳定”或“有问题”，只是它没有达到大多数人想要的效果

理想情况下，您可以完全避免垂直对齐文本，但有时我们需要这样做。做这件事有多种方法，至于决定用哪种方法，通常取决于你工作的具体情况

---

在这种情况下，如果你可以相信它是一行文本，我认为你最好的选择是用一些额外的顶部填充，或者

相对位置

进行光学调整，然后将其降低几个像素

你知道，这在css中已经是一个可怕的失败很长一段时间了。我有丰富的经验，但到目前为止，我还不知道可靠的垂直对齐解决方案。我能建议的最好办法是调整线的高度，直到它符合你的需要。。。ps，是的，我知道你说过你不想设定线的高度。我只是说，这就是我在

em

中对tengive

padding

或

margin

所做的事情，类似于

padding:0.5em 0。据我所知，你的
是
浮动：左
，而你的
是
浮动：右
，因此没有
行高
，它们就无法“对齐”，因为它们彼此不太了解。如果你真的想让它们垂直居中，摆脱
pull-*
类，想另一种方法把它们放在两边：需要
text align:right
在
上。right cell
保持按钮右对齐，但是如果不是这样的话，这看起来效果很好。