html - 将标题中心的 Logo + h2 与响应行为对齐

Question

我在这里搜索了很多线程，但找不到更符合我需要的东西。我有一个 Logo 图像 50x50px 和 h2 文本元素。我想让这两个元素并排放置，但在我的标题的绝对中心。我尝试了各种 CSS 技术，但无法完成。下面是我尝试使用的简单 Bootstrap 结构:

<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 并在 col-md-12 之后使用 center 标签> 将 img 和 heading 都放在中心标签内，并添加 class col-sm-12