HTML实例-047 html图像对齐方式

hrs 提交于 2019/11/06 - 08:03 , 周三

在网面我们怎么对图片进行对齐呢?下面我们就来做个实例。

实例代码:

<!doctype html>
<head>
<meta charset="utf-8">
<style>
img{
width:50px;
height:50px;
}
</style>
</head>
<html>
<body>
<h2>未设置对齐方式的图像</h2>
<img src="cat.jpeg">
<h2>已设置对齐方式的图像</h2>
<p>图像<img src="cat.jpeg" align="bottom">与文本底部对齐</p>
<p>图像<img src="cat.jpeg" align="middle">与文本中间对齐</p>
<p>图像<img src="cat.jpeg" align="top">与文本顶部对齐</p>
</body>
</html>

运行效果:

html_047.png

从这个实例中我们看出,html 图像有3种对齐方式,分别是:bottom 底部对齐,middle 中间对齐,top 顶部对齐。用align 对齐属性来定义 。

aling="bottom"

aling="middle"

aling="top"

标签