使用CSS设置背景图片

Question

我在这里上传图片，我想将图片放在“食物和旅行”文字的左侧

.block-title h3 {
  color: #151515;
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.9px;
  margin-bottom: 24px;
  margin-top: 50px;
  padding-bottom: 13px;
  position: relative;
  text-align: center;
}

<div class="col-lg-12">
  <p>
    <center><img src="#">
      <div class="block-title">
        <h3>Food & Travel</h3>
      </div>
    </center>
  </p>
</div>

Answer 1

您只需要添加 CSS

div.block-title { display: inline-block; }

<div class="col-lg-12">
  <p>
    <center><img src="#">
      <div class="block-title">
        <h3>Food & Travel</h3>
      </div>
    </center>
  </p>
</div>

Answer 2

我会稍微更改您的HTML：

<div class="col-lg-12">
    <div class="block-title">
        <img class="image" src="https://image.flaticon.com/icons/png/512/45/45260.png">
        <h3 class="title">Food & Travel</h3>
    </div>
</div>

关于HTML的一些观察结果

• 自创建CSS以来，在HTML内部使用样式元素（如 center ）是一种不好的做法。 HTML仅应包含内容和CSS样式。在大多数情况下，HTML中的 center 可以很容易地用CSS中的 text-align：center 替换；
• 避免为标签赋予样式（就像使用H3一样）。最好为要设置样式的每个元素都提供一个类。例如，您可以像上例一样为图像和标题提供类。

如某些用户在此处提到的，

浮动几乎不是一个好选择。我不推荐它。 我会在容器（ block-title ）上使用 Flexbox 。这是更好的选择，也是最准确的。

您的容器就像

.block-title {
  display: flex;
  justify-content: center;
  align-items: center;
}

...魔术就完成了！

以下是使用 flexbox 的示例： https://codepen.io/annabranco/pen/mzEXGv

如果您还不习惯使用Flebox，另一个选择是给H3一个显示：内嵌。默认情况下，所有标头都强制换行（它们具有display：块）。如果将其更改为 display：inline ，则强制其他元素与标题显示在同一行中。 在这种情况下，您需要进行 vertical-align （垂直对齐）的操作，以找到文本在图像上居中的确切位置。

.title {
    display: inline;
(..)
}

.image {
  vertical-align: -25px; //negative values go up and positive down.
}

这里是使用 inline 的另一个示例： https://codepen.io/annabranco/pen/yRJvQa