根据浏览器显示在不同地方的图​​像

Question

我正在使用HTML和CSS构建一个非常简单的网站。它由标题，文本段落和图像组成。

当我在Chrome上查看网站时，所有三个对象的展示位置都非常有效。但是在Firefox和Safari中，他们一直在争吵。当我针对这两者中的一个进行优化时，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;
}

等

还有第二个问题：我可以为图像分配什么属性，以便文本总是包裹图像，而不是在图像的前面或后面呈现？

谢谢！

Answer 1

如果您希望图片居中并与网页内容保持一致，则无需添加任何其他CSS，因为您已将text-align: center添加到body。

图像将居中，因为它是内联元素。此外，您的代码有很多问题，请考虑简化版本：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

• 使用CSS边距而不是重复的<br>标记
• 无需重新定义字体，因为它是从body继承的
• 将CSS规则添加到外部文件而不是内联（例如，对于<hr>）
• 使用margin: 0 auto将<p>
等块级元素居中

jsFiddle：https://jsfiddle.net/azizn/d1xmv65m/