ヘッダ付きセンター背景画像

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は、コンテンツのための背景だけではありません：背景には、あなたが使用する必要があります。

Answer 2

background-position: center center（または略号background: url(...) center center;）を追加します。パディングを調整して、好みに合わせて調整します。