将标题中心的徽标+ h2与响应行为对齐

Question

我在这里搜索过许多帖子，但找不到更符合我需求的东西。我有一个标志图像50x50px和h2文本元素。我希望将两个元素并排放在我的标题的绝对中心。我尝试了各种CSS技术，但无法完成。下面是我尝试使用的简单引导程序结构：

<div class="container">
      <div class="row">
      <div class="col-md-12"><img src="https://placeimg.com/50/50/nature" alt="LOGO"> 
         <h2>FOUR SEASONS INTERNATIONAL (PVT) LTD</h2></div>
          </div>
  </div>

Answer 1

使用此CSS

img + h1{
  display: inline-block
  vertical-align: middle;
}

移除任何你添加的位置只使用margin,padding, top, left, right bottom并使用center标签后col-md-12将img和标题放在中心标签内并添加class col-sm-12

Answer 2

也许您正在寻找display:flex with align-items:center

.test{
  display:flex;
  align-items:center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
      <div class="row">
      <div class="col-md-12 test"><img src="https://placeimg.com/50/50/nature" alt="LOGO"> 
         <h2>FOUR SEASONS INTERNATIONAL (PVT) LTD</h2></div>
          </div>
  </div>