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

如果您始终知道图像的宽度，可以使用它来绝对定位偏移负向右方向，如下所示：

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

或者，如果您不担心旧浏览器，可以使用calc（）来确定左侧：

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

编辑：更正，我误读了你问题的左右两边。我已经调整了我的答案。

Answer 2

尝试在img上使用绝对定位。这将使图像从段落的右边缘定位100px。将“正确”值调整为您想要的数量。如果你愿意，你应该在段落标签（“p”）上使用position：relative。

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

Answer 3

只需添加绝对位置：

 function changeFont(font){
                      gameRun=false;
    document.getElementById("pointsEnd").style.fontFamily = font.value;
    document.getElementById("points").style.fontFamily = font.value;
    document.getElementById("countdown").style.fontFamily = font.value;
    document.getElementById("hightpoints").style.fontFamily = font.value;
    document.getElementById("outputMath").style.fontFamily = font.value;
        document.getElementById("SettingsBlock").style.fontFamily = font.value;
    document.getElementById("InfoText").style.fontFamily = font.value;
      console.log('Font changed with value: '+font.value);
       window.localStorage['font.value'] = font.value;

}

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

我想在标题的右侧添加一张图片，同时将标题保持在页面的中心

3 个答案: