【问题标题】:Image will move when adding text添加文本时图像会移动
【发布时间】:2016-09-01 15:54:56
【问题描述】:

我还是个初学者,已经用谷歌搜索过这个问题,但没有答案。当我在 HTML 的其他位置添加一些文本时,顶部的“欢迎”图像会移动一点。

当文本出现在我的图像下方时似乎会发生这种情况,但我尝试将我的欢迎图像的位置设置为相对和绝对,与我的 <p> 文本相同,但这无济于事。我还尝试将我的欢迎图像放入 div,但也没有运气。

(请原谅我还没有使用相对路径)。

这是我的 HTML 顶部的欢迎图片中的 HTML。

HTML 欢迎图片

<img id="welcome"/>
<center>
<a href="file:///C:/Users/M%20de%20Witte/Desktop/html/index.html">
<img src="C:\Users\M de Witte\Desktop\html\welcome03vectorpng.png"    height="100px" /> </a>
</center>

CSS 欢迎图片

#welcome{

height: 50px;
}

HTML P

 <p id="thisiswhatiliketdo">
 This is what I like to do
 </p>

CSS P

#thisiswhatiliketdo{

font-family: moon_flower_boldregular;
font-size: 30px;
float: right;
margin-top: 300px;
margin-right: 300px;

}

【问题讨论】:

  • &lt;center&gt; 已被弃用,不应再使用。为什么他们仍然在教这个,我无法理解。
  • 不知道它现在是什么样子,也不知道它应该是什么样子,这很难提供帮助。这就是为什么我们通常需要功能演示。如有必要,您可以使用占位符图像。
  • 那么使图像居中的另一种选择是什么?当我移除中心时,其他图像也在移动。
  • 感谢您的回复,但我不明白。将
    留在后面是可以的,但对于
    也无济于事。我也不懂占位符图片,如果你也愿意,我可以在这里发布我的完整代码。

标签: html css image position


【解决方案1】:

很难通过您的描述来猜测您的设计应该是什么样子,但听起来您在图像和文本对齐方面遇到了问题。这个 HTML align 属性示例应该能够解决您的问题,以便您可以将欢迎图像放置在文本上方、下方或旁边,而不会随着您向页面设计添加更多内容而移动。

http://www.w3schools.com/tags/att_img_align.asp

点击“Try Yourself”按钮预览代码结果。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-02-19
    • 2014-04-06
    • 1970-01-01
    • 1970-01-01
    • 2012-07-15
    • 2017-06-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多