Question

我试图将图像放在屏幕中间和右侧（这就是现在的位置）的中间位置。

HTML代码：

<img src="jeremy.png" alt="Jeremy Smith" width="100" height="100" style="float:right">

有没有办法让图像以3/4向右浮动？或类似的东西？

Answer 1

有很多方法可以实现。我能想到的一个简单方法是使用div将其对齐到屏幕的右侧区域。您也可以将图像置于绝对位置或将边距应用于图像。

div {
  margin-left: 50%;
  text-align: center;
}

<div><img src="jeremy.png"><\div>

Answer 2

img {
  width: 100px;
  height: 100px;
  margin-left: 75%;
  transform: translate(-50%, 0);
}

保证金和翻译是您最好的定位朋友。由于translate是自引用的，因此使用transform: translate(-50%, 0)会使边距偏离图像的中心，而不是左边缘。这应该可以解决问题

Answer 3

最明显的方法是使用：

#imgAtThreeQuarters {
  /* positioning the element in relation to 
     its closest offset-parent element: */
  position: absolute;

  /* positioning the left-border of the
     image 75% from the left-most border
     of its closest offset-parent element: */
  left: 75%;

  /* moving the image to the left by half
     of its width, to position the horizontal
     center of the image at 75% of the
     offset-parent's width: */
  margin-left: -50px;
}

＆＃13;

#imgAtThreeQuarters {
  position: absolute;
  left: 75%;
  margin-left: -50px;
}

＆＃13;

<img id="imgAtThreeQuarters" src="http://lorempixel.com/100/100/nature" />

＆＃13;

这要求它的offset-parent（<body>元素，或者position属性值不是static的最近的祖先）的宽度为{{1页面。

当然，我还使用了非内联CSS，因此要使用上面的图像，需要有相应的100%属性。

HTML：在屏幕的中间和右侧放置图像

3 个答案: