HTML 参考手册

HTML 标签大全

HTML: <img> align 属性

本文介绍HTML img align属性根据周围的元素指定图像的对齐方式， <img>元素是一个内联元素（它不会在页面上插入新行），这意味着文本和其他元素可以环绕它。因此，根据周围元素指定图像的对齐方式可能很有用。

 HTML <img> 标签

在线示例

设置文本中的图像的几种对齐方式：

<!DOCTYPE html>
<html>
<head>
<title>HTML:<img> align 属性 - 菜鸟教程 (cainiaoplus.com)</title>
<body>
<h2>align="bottom" (default):</h2>
<p>This is some text. <img src="haha.gif" alt="haha face" width="42" height="42"> This is some text.</p>

<h2>align="middle":</h2>
<p>This is some text. <img src="haha.gif" alt="haha face" width="42" height="42" align="middle"> This is some text.</p>

<h2>align="top":</h2>
<p>This is some text. <img src="haha.gif" alt="haha face" width="42" height="42" align="top"> This is some text.</p>

<h2>align="right":</h2>
<p>This is some text. <img src="haha.gif" alt="haha face" width="42" height="42" align="right"> This is some text.</p>

<h2>align="left":</h2>
<p>This is some text. <img src="haha.gif" alt="haha face" width="42" height="42" align="left"> This is some text.</p>
</body>
</html>
测试看看 ‹/›

浏览器兼容性

IEFirefoxOperaChromeSafari

所有主流浏览器都支持 align 属性。

定义和用法

HTML5 不支持 <img> align 属性。请使用 CSS 替代。

在 HTML 4.01 中，<img> 的 align 属性 已废弃。

align属性根据周围的元素指定图像的对齐方式。

<img>元素是一个内联元素（它不会在页面上插入新行），这意味着文本和其他元素可以环绕它。因此，根据周围元素指定图像的对齐方式可能很有用。

兼容性注释

在 HTML 4.01 中，<img> 的 align 属性已废弃。请使用 CSS 替代。

CSS 语法：<img style="float:right">

CSS 示例：向右浮动图像

在我们的 CSS 教程中，您可以找到更多有关 float 属性的细节。

语法

<img align="left|right|middle|top|bottom">

属性值

值描述
left把图像对齐到左边。
right把图像对齐到右边。
middle把图像与中央对齐。
top把图像与顶部对齐。
bottom把图像与底部对齐。
 HTML <img> 标签
HTML: <template> 标签