Bootstrap3 - 在h2内垂直对齐标签

Question

I am facing an interesting issue with Bootstrap3 where the label ("Name") seems to be aligned at the bottom of the <h2> tag (see the blue box in the image (highlighted by the Chrome dev tool).

(From the Bootstrap 3 documentation putting labels inside headings seem to be a suggested way)

I can't figure out how to vertically align the label in center of <h2> . vertical-align doesnt work on h2 it seems. This answer to another SO post suggests changing the line-height but that doesn't seem to be an intuitive approach since it increases the padding on both sides of h2 (basically increasing the size of the h2 block).

This label is inside a table cell whose code is as follows:

<td class="text-right"><h2><span class="label label-default vcenter">Name</span></h2></td>

(vcenter is the class I am trying to use to vertically align)

Answer 1

It looks like all solutions teach you how to vertically center your .label in the <td> . However, none of them takes into consideration the difference between top and bottom margins on the h2 element.

Basically, you're trying to vertically center with something that's not vertically centered. The only way to account for it is to raise the label with half the margins difference, which should be .5rem . So this will most likely to the job:

h2 > .label { 
   position: relative;
   top: -.5rem;
}

If it doesn't, you have stronger CSS rules applying and I'll need to take a look at them. Feel free to change -.5rem to whatever works for you (in rem or px ).

---

Another approach is to use any vertical centering technique and make the top and bottom margins equal on td>h2 elements:

td>h2 {  margin-top: 1rem; margin-bottom: 1rem; }

After this, most of the other answers will work.

Answer 2

You can add display: flex to the headline tag and then center its children vertically:

 h2 { display: flex; align-items: center; /* Just for presentation */ background: #ececec; height: 100px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <td class="text-right"> <h2><span class="label label-default vcenter">Name</span></h2> </td> 

Answer 3

add valign middle for td

<td valign="middle" class="text-right"><h2><span class="label label-default vcenter">Name</span></h2></td>

or

add this css

.table tbody>tr>td.vert-align
{
    vertical-align: middle;
}

<td  class="text-right vert-align"><h2><span class="label label-default vcenter">Name</span></h2></td>