ブラウザに依存して異なる場所に画像が表示される

Question

HTMLとCSSを使用して非常に簡単なサイトを構築しています。これは、見出し、テキストの段落、およびイメージで構成されます。

Chromeでサイトを表示すると、3つのオブジェクトすべての配置が完全に機能します。しかし、FirefoxとSafariでは、彼らは混乱している。その2つのうちの1つを最適化すると、Chromeのバージョンが見えます。ここなど

は、CSSです：

img { 
position: fixed; 
bottom: 280px; 
right: 800px; 
} 

とHTML：

<img src="bob.jpg" height="50%" width="20%"> 

は、この問題を解決するために、比較的簡単な方法はありますか？ブラウザに応じて位置を指定できますか？

img { 
position: fixed; 
/* Chrome 
bottom: 350px; 
right: 925px; 
/* Firefox 
bottom: 200px; 
right: 800px; 
} 

など

そして、2つ目の質問：そのテキストは常にかなりの前にまたはその背後にレンダリングするよりも、画像を包むように、どのような性質私がイメージを割り当てることができますか？

ありがとうございました！

Answer 1

イメージをページのコンテンツの中央に配置して整列させたい場合は、text-align: centerがbodyに追加されているため、追加のCSSを追加する必要はありません。

イメージはインライン要素であるため、中央に配置されます。それはから継承されているので代わりに繰り返し<br>タグ

の

body { 
 
    background-color: white; 
 
    text-align: center; 
 
    font-family: "Courier New", Courier, monospace; 
 
} 
 

 
p { 
 
    text-align: left; 
 
    font-size: 12px; 
 
    max-width: 50%; 
 
    margin: 0 auto; 
 
} 
 

 
hr { 
 
    width: 50%; 
 
    margin: 3em auto; 
 
}

<div class="marquee"> 
 
    <h3>THE X-FILES EPISODE GENERATOR</h3> 
 
    <hr> 
 
    <p>Make your own episode!</p> 
 
    <p>The X-Files generator mixes people, places and plots from different episodes to create new adventures.</p> 
 
    <hr> 
 
    <div class="wrap"> 
 
    <button onclick="sentenceLoad()">Generate</button> 
 
    </div> 
 
    <div class="container"> 
 
    <h5></h5> 
 
    </div> 
 
    <img src="https://bobbyfestgenerator.github.io/X.jpg" alt=""> 
 
</div>

• 使用CSSマージンフォントを再定義する必要はありません：また、あなたのコードは、多くの問題があり、簡易版を考えますbody
• インラインではなく外部ファイルにCSSルールを追加します（<hr>など）
<p>

jsFiddleのような中央のブロックレベル要素に

使用margin: 0 auto：https://jsfiddle.net/azizn/d1xmv65m/