html - 在HTML中将文本与标题标签(h2)对齐

This question already has answers here:

How do I vertically center text with CSS? [duplicate]
                                
                                    （38个答案）
                                
                        
                        
                            How to vertically center a div for all browsers?
                                
                                    （45个答案）
                                
                        
                        
                            Twitter Bootstrap - how to center elements horizontally or vertically
                                
                                    （12个答案）
                                
                        
                        
                            Flexbox: center horizontally and vertically
                                
                                    （11个答案）
                                
                        
                        
                            vertical-align with Bootstrap 3
                                
                                    （23个答案）
                                
                        
                                2年前关闭。
            
                    
我有这个代码：

<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>

但是因为我的字体大小不同，所以它们没有垂直对齐。我得到这个：



如何将“名称”的中间部分与“内容”的中间部分对齐？谢谢

最佳答案

您可以将flex用于行。

.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>