html - 如何将图像完全固定在一个相对点 css 上-6ren

html - 如何将图像完全固定在一个相对点 css 上

转载作者：行者123 更新时间：2023-11-28 03:48:48

我不确定如何解决这个问题:图像直接位于某些文本下方，并且在调整窗口大小时仍直接位于该文本下方。我的问题是我不能只将图像向左浮动，它需要更远，并与一些文本内嵌移动。就像使图像居中一样，即使调整页面大小时，它也会始终保持在相对中心。

编辑:我认为问题是我有 3 个彼此相邻的文本部分，格式如下，并且在调整页面大小时它们会移动:

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="example.css"/>
<p>this is the text which the image should follow (stay inline with)
</p>
<p>third section middle</p>
<p>third section right</p>
<img src="https://codepo8.github.io/canvas-images-and-pixels/img/horse.png"/>

CSS:

p{
  float:left;
  width:33.33333%;
  text-align: center;
  color: #2A3132;
}
img{
  width: 10%;
}

而且我希望在调整页面大小时该图像保持在该文本的中心。我希望这会有所帮助。

最佳答案

放入父内容

.content{
  background: yellow;
  padding: 5px;
  border: 1px solid red;
}
p{
  display: inline-block;
  margin-right: -4px;
  width:33.33333%;
  text-align: center;
  color: #2A3132;
  background: red;
  vertical-align: top;
}
img{
  display: block;
  margin: 0 auto;
}

<div class="content">
  <p>this is the text which the image should follow (stay inline with)</p>
  <p>third section middle</p>
  <p>third section right</p>
  <img src="http://devimg.com/100x100/"/>
</div>

关于html - 如何将图像完全固定在一个相对点 css 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43834643/