图像的水平对齐

---

实例

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

<网页>
<主体>
<标题2>未设置对齐方式的图像：</标题2>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“> 在文本中</段落>
<标题2>已设置对齐方式的图像：</标题2>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐=“底端“> 在文本中</段落>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐=“中间“> 在文本中</段落>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐=“上边“> 在文本中</段落>
<段落>请注意，底端 对齐方式是默认的对齐方式。</段落>
</主体>
</网页>

---

 

定义和用法

 

<图像> 标签的 水平对齐 属性定义了图像相对于周围元素的水平和垂直对齐方式。

 

详细说明

 

标准没有定义图像相对于其他文字和与其处于同一行中的其他图像的对齐关系。超文本（HTML）图像在行中出现时通常只伴有一行文字。而通常的印刷媒体，像杂志，则把文字在图像的周围进行环绕，这样就会有很多行文字与图像相邻，而不只是一行。

 

幸运的是，文档设计者可以通过 <图像> 标签的 水平对齐 属性来控制带有文字包围的图像的对齐方式。超文本（HTML ）和 XHTML 标准指定了 5 种图像对齐属性值：左边、右边、顶端、中间和 底端。左边和 右边 值会把图像周围与其相连的文本转移到相应的边界中；其余的三个值将图像与其相邻的文字在垂直方向上对齐。

 

注意：不同的浏览器以及同一浏览器的不同版本对 水平对齐 属性的某些值的处理方式是不同的。

 

注意：HTML 4.01 不推荐使用 align 属性，XHTML 1.0 严格的 DTD 不支持该属性，同时 HTML 5 也不再支持该属性。

---

浏览器支持

虽然不赞成使用 水平对齐，但是几乎所有浏览器都支持该属性。

---

兼容性注释

不赞成使用 水平对齐 属性和 <中心> 标签

HTML 4 和 XHTML 中不再推荐使用所有标准中的 水平对齐 属性，当然包括 <图像> 的 水平对齐 属性，以便使用样式表。同时不再使用 <中心> 标签。

然而，该属性及标签在 超文本（HTML ）创作者中非常流行，并且现在流行的浏览器都能很好地支持它们。所以，虽然我们期望 水平对齐 和 <中心> 将来有一天会消失，但还需要等待很长一段时间。

解决方案

如果您不想使用 水平对齐 和 <中心> 时该怎么办呢？您可以使用 HTML/XHTML 表格来对齐内容。不过更好的方案是使用样式。例如，外边距左 属性 可以对图像进行缩进，而 浮动 属性 可以实现文本包围图像的效果。

实例

<网页>
<主体>
<标题2>未设置对齐方式的图像：</标题2>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ /> 在文本中</段落>
<标题2>向右浮动的图像：</标题2>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 样式=“浮动:右边“ /> 在文本中</段落>
</主体>
</网页>

---

 

语法

 

<图像 水平对齐="值" />

 

属性值

 

值	描述
左边	把图像对齐到左边
右边	把图像对齐到右边
中间	把图像与中央对齐
顶端	把图像与顶部对齐
底端	把图像与底部对齐

---

实例

垂直对齐图像

本例演示如何在文字中垂直对齐图像。

<网页>
<主体>
<标题2>未设置对齐方式的图像：</标题2>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“> 在文本中</段落>
<标题2>已设置对齐方式的图像：</标题2>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐=“底端“> 在文本中</段落>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐=“中间“> 在文本中</段落>
<段落>图像 <图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐=“上边“> 在文本中</段落>
<段落>请注意，底端 对齐方式是默认的对齐方式。</段落>
</主体>
</网页>

水平对齐图像

本例演示如何使图片浮动至段落的左边或右边。

<网页>
<主体>
<段落>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐 =“左“>
带有图像的一个段落。图像的 水平对齐 属性设置为 “左边“。图像将浮动到文本的左侧。
</段落>
<段落>
<图像 资源地址=“https://www.w3school.com.cn/i/eg_cute.gif“ 水平对齐 =“右边“>
带有图像的一个段落。图像的 水平对齐 属性设置为 “右边“。图像将浮动到文本的右侧。
</段落>
</主体>
</网页>

---

---