Align text with title tag (h2) in HTML

Question

I have this code :

<div class="row margin-bt-5">
   <div class="col-xs-4 ft-bold">Name  &nbsp;:</div>
   <div class="col-xs-8">
      <h2>Content</h2>
   </div>
</div>

But because I have different font size, they are not aligned vertically. I get this :

How can I align the middle of "Name" with the middle of "Content" ? Thanks

heading tags have margin by default. Try putting `margin: 0` for `h2`. — Harish Kommuri, Jul 31 '18 at 08:15

Harish Kommuri · Accepted Answer · 2018-07-31T09:59:59.330

0

You can use flex for row.

.margin-bt-5 {
  display: flex;
  align-items: center;
}

.margin-bt-5 h2 {
  margin-top: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row margin-bt-5">
   <div class="col-xs-4 ft-bold">Name  &nbsp;:</div>
   <div class="col-xs-8">
      <h2>Content</h2>
   </div>
</div>

edited Jul 31 '18 at 09:59

answered Jul 31 '18 at 08:20

Harish Kommuri

2,825
1
22
28

This solution is not exactly what I was looking for, because Content is still below Name, but it is good enough in my case. Thanks – bobier2 Jul 31 '18 at 08:26
1

@bobier2 Plz try it now. I didn't see Bootstrap CSS. – Harish Kommuri Jul 31 '18 at 10:00
Perfect ! Thank you so much – bobier2 Jul 31 '18 at 13:44

score -1 · Answer 2 · answered Jul 31 '18 at 08:16

.margin-bt-5 h2{
    margin-top: 0px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row margin-bt-5">
   <div class="col-xs-4 ft-bold">Name  &nbsp;:</div>
   <div class="col-xs-8">
      <h2>Content</h2>
   </div>
</div

Align text with title tag (h2) in HTML

2 Answers2