css - 带标题的中心背景图像

Question

我这里有一个 JSFiddle - https://jsfiddle.net/ow1x3e0a/14/

简单的 CSS 问题。

我有一个标题，我需要在它的侧面有一个图像。我可以用背景图片来做到这一点。

当窗口较小时，我需要将文本和图像居中，使其显示在中间，就像在左侧一样。

此时文字居中，但图片在左侧

我尝试过不使用文本对齐，但无法使用 margin: auto:

居中

.container{
    margin-top: 50px;
}
.header{
    font-size: 20px;
    padding-left: 110px;
    background-image: url(http://placehold.it/100x50);
    background-repeat: no-repeat;
}

@media only screen and (max-width:767px){
  .header{
      text-align: center;
  }
}

Answer 1

在给背景的时候，需要用到:

background-position: center center;

text-align: center 或 margin: auto 仅用于内容，不用于背景。