如何在按钮旁边对齐此文本？

Question

jsFiddle

screenshot

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>

How can I get the header <h6> vertically-centered with respect to the Edit button?

Putting vertical-align on the box-header doesn't work. I don't want to hard-code a line-height because I might change the button sizing or something later and then it will break.

Answer 1

You could use css display: table and display: table-cell and vertical-align: middle .

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>

CSS

.box-header {
    border-bottom: 1px solid #aac7ef;
    padding-bottom: 5px;
    display: table;
    width: 100%;
}
.left-cell {
    display: table-cell;
    vertical-align: middle;
}
.right-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

Demo

Answer 2

vertical-align only applies to two type of objects: 1, table cells and 2, inline elements.

It has no bearing on any other type of HTML element.

It's not that it's 'spotty' or 'a problem' it's just that it doesn't do what most people want it to do.

Ideally, you'd avoid vertically aligning text altogether, but sometimes we need to. There are various ways to do it and as for deciding which way to do it, it usually depends on the particular situation you're working in.

In this situation, if you can rely on it being one line of text, I think your best bet is to just optically adjust with either some extra top padding, or position-relative and drop it down a few pixels.

Answer 3

if you don't want to hard code it, maybe try set it dynamically.

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

I created a jsfiddle

Answer 4

you are using pull-right and pull-left which floats the elements left and right and so vertical alignment will not work in that case. Best you can do is play with the padding, or as others suggested set line-height on your h6 element to something like 24px. And yes vertical-align:middle is spotty at best, and never satisfying to those who seek pixel perfection

Answer 5

yeah..vertical alignment has been a problem in css. So what i suggest you is to set the margin-top of the box-header... like margin-top:1px .. adjusting the box header wrt margin top will solve the problem. Also you can check with the Firebug in Firefox that by how many pixels u need to set the margin-top.