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

时间:2018-03-03 13:37:43

标签: html css

我在这里搜索过许多帖子,但找不到更符合我需求的东西。我有一个标志图像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>

2 个答案:

答案 0 :(得分:0)

也许您正在寻找 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>

答案 1 :(得分:0)

使用此css

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

删除您添加的位置仅使用margin,padding, top, left, right bottom,并在center将{img}标题放入中心标记后使用col-md-12标记并添加class col-sm-12