将图像向右对齐

Question

因此，我对整个编码工作还是非常陌生的，为此，我正在为这个班级建立这个站点，我想对齐底部的这张照片并将其移到页面的右侧。

<img src ="halogram%20VR.jpg" alt = "man in halogram type VR setting" width:"200" height= "200">

这是图像的代码，我试图添加类似align=center的内容，但是没有任何结果。将图片移到页面右侧的正确代码是什么？

Answer 1

虽然您可以使用float:right，但这意味着您需要为该元素之后的所有内容清除float。您可以在父元素上使用text-align作为更简单的选项：

div {
  text-align: right;
}

<div>
  <img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
</div>

[float的示例弄乱了您的布局而没有clear对其进行布局（注意，在Stackoverflow的小宽度上看起来不错，单击full page将显示实际结果）。

img {
  float: right;
}

<div>
  <img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
  <h1>HELLO WORLD</h1>
</div>
<h1>HELLO WORLD</h1>

使用flexbox的示例

div {
  display: flex;
  justify-content: flex-end;
}

<div>
  <img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
</div>

[使用float和clear ing的示例：

.clear::after {
  display: block;
  content: "";
  clear: both;
} 

.float {
  float: right;
}

<div class="clear">
  <div class="float">
    <img src="https://image.shutterstock.com/image-vector/example-sign-paper-origami-speech-260nw-1164503347.jpg" />
  </div>
</div>
<p>HELLO WORLD</p>

Answer 2

您可以在HTML中使用<img src="image.jpg" alt="image" style="float: right">来执行此操作，也可以在单独的.css文件中使用img {float: right;}来执行此操作