使用引导程序将背景图像与文本水平对齐

Question

我正在尝试遵循以下用户界面模型：，并且正在使用Bootstrap3。以下是我的HTML标记和CSS。

#game-configuration .subtitle-icon {
  font-weight: bold;
  padding-left: 30px;
}
#game-configuration .subtitle-icon .icon {
  height: 100px;
  width: 130px;
}

#game-configuration .subtitle-icon .description {
  padding-top: 30px;
}

  <div class="col-md-4">
          <div class="subtitle-icon clearfix">
            <div class="icon test-icon pull-left">
            </div>
            <p class="description">Test Gamelift with our Sample game </p>
          </div>

但是我的视图最终看起来像

我要添加到描述p标签的padding-top感觉就像是黑客，并且与模型不完全匹配。达到说明顶部和左侧填充的最佳方法是什么？我应该使用Bootstrap的网格系统创建嵌套的行和列，而不是在说明中添加更多padding-top和padding-left吗？

Answer 1

您可以使用名为flexbox的CSS3新功能

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

<div class="image_block">
  <img src="https://i.imgur.com/pvmCbcW.jpg" alt="" width="100">
  <p>Hi im nisharg shah, welcome to stackoverflow</p>
</div>