見出しの右側に画像を追加したいのですが、ページの中央に見出しを入れておきます。

Question

テキストをページ中央に中央に置き、画像の右側に100pxの画像を追加します。テキスト。

<p style=background-color:#FFFFFF; 
     font-size:600%; 
     text-align:center; 
     color:red;> 
    Great Sheds 
    <img style=margin:100px src="transomshutter.jpg" height="84" width="168"> 
</p> 

これはコードの現在のセクションです。テキストを左に移動すると、テキストの行に画像が表示されません。それは今のところ上と下です。

Answer 1

imgで絶対位置を指定してみてください。これにより、パラグラフの右端から100ピクセルの画像が配置されます。 「右」の値を必要な量に調整します。これにしたい場合は、段落タグ（ "p"）にposition：relativeを使用する必要があります。

<img style="position: absolute;right: 100px;" src="transomshutter.jpg" height="84" width="168"> 

Answer 2

あなたは常にイメージの幅を知っている場合、あなたはそのように、絶対位置と負の右方向をオフセットするためにそれを使用することができます：あなたは心配していないなら、

また

p { 
    position: relative; 
} 
p img { 
    position: absolute; 
    right: -268px; 
} 

は、古いブラウザ、あなたは左サイドを決定するために）（計算値を使用することができます。

p img { 
    position: absolute; 
    left: calc(100% + 100px); 
} 

EDIT：補正は、私はあなたの質問の左右を読み違えます。私はその答えを調整しました。

Answer 3

だけで絶対位置を追加します。

p { 
 
    background-color: #FFFFFF; 
 
    font-size: 600%; 
 
    text-align: center; 
 
    color: red; 
 
} 
 

 
img { 
 
    position: absolute; 
 
    margin-left: 100px; 
 
}

<p>Great Sheds 
 
    <img src="https://lorempixel.com/80/80/" height="84" width="168"></p>

それともあなたが望むように背景として画像を使用して位置を調整します

p { 
 
    
 
    background-color: #FFFFFF; 
 
    font-size: 600%; 
 
    text-align: center; 
 
    color: red; 
 
    background-image: url("https://lorempixel.com/80/80/"); 
 
    background-position:right; 
 
    background-repeat: no-repeat; 
 
}

<p>Great Sheds</p>