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

【问题标题】：Align background image horizontally with text using bootstrap使用引导程序将背景图像与文本水平对齐
【发布时间】：2019-04-27 06:22:30
【问题描述】：

我正在尝试关注这个 UI 模型：，我正在使用 Bootstrap 3。下面是我的 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 感觉就像是一个 hack，它与模型不完全一致。实现描述的顶部和左侧填充的最佳方法是什么？我应该使用 Bootstrap 的网格系统来创建嵌套的行和列，而不是在描述中添加更多的 padding-top 和 padding-left 吗？

【问题讨论】：

您是否尝试过引导边距或填充间距
你能给我们举个例子吗

标签： css twitter-bootstrap

【解决方案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>

【讨论】：