HTML中图片和文字的对齐方式

文字和图片的对齐方式会影响到页面的整体效果，之前没有仔细研究过。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片与文字的相对位置</title><style>img{width: 160px;height: 126px;margin: 10px;}</style>
</head>
<body>
<h3>图片与文字的相对位置</h3>
<!--    absmiddle       图片中间与同一行最大元素中间对齐；absbottom       图片下边缘与同一行最大元素下边缘对齐；baseline        图片下边缘与第一行文本下边缘对齐；bottom          图像下边缘与第一行文本下边缘对齐；left            图像沿网页左边缘对齐，文字在图像向右边换行；middle          图像中间与第一行文本的下边缘对齐；notset          未设定对齐方式；right           图像沿网页的右边缘对齐，文字在图像左边换行；texttop         图片上边缘与同一行最高文本上边缘对齐；top             图片上边缘与同一行最高元素上边缘对齐。--><!--图片中间与同一行最大元素中间对齐--><img src="../image/ab1.jpg" align="absmiddle"/><!--图片下边缘与同一行最大元素下边缘对齐--><img src="../image/ab2.jpg" align="absbottom"/><!--图片下边缘与第一行文本下边缘对齐--><img src="../image/ab3.jpg" align="baseline"/><!--图像下边缘与第一行文本下边缘对齐--><img src="../image/ab4.jpg" align="bottom"/><!--图像沿网页左边缘对齐，文字在图像向右边换行--><img src="../image/ab5.jpg" align="left"/><!--图像中间与第一行文本的下边缘对齐--><img src="../image/ab6.jpg" align="middle"/><!--未设定对齐方式--><img src="../image/ab7.jpg" align="notset"/><!--图像沿网页的右边缘对齐，文字在图像左边换行--><img src="../image/ab8.jpg" align="right"/><!--图片上边缘与同一行最高文本上边缘对齐--><img src="../image/ab9.jpg" align="texttop"/><!--图片上边缘与同一行最高元素上边缘对齐--><img src="../image/ab10.jpg" align="top"/>
</body>
</html>

页面效果如下图所示：

HTML中图片和文字的对齐方式相关推荐

图片和文字同行对齐方式
align="absmiddle" AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐. AbsMiddle 图像的中间与同一行中最大元素的中间对齐. Baseline ...
html图片后边自动底部对齐,css实现图片与文字底边对齐
css实现图片与文字底边对齐通常图片与文字放在一起的时候图片往往会偏上,通过设置margin-bottom可以达到文字图片底边对齐的目的我们在做网页的时候, 会遇到一个图片和文字位置对不齐的问题. ...
如何使图片和文字垂直对齐（vertical-align：middle；）
vertical-align是适用于行内或行内块元素的.设置垂直对齐的方式. 1.图片和文字居中对齐 <img src="img/zxj.jpg" alt="&qu ...
html图片左右对齐,css如何让图片或者文字两端对齐
css原生的就支持图片或者文字两端对齐.两端对齐,在css布局中是很常见的.两端对齐,是子元素水平的,均匀的分布在父元素内 .css中使用两端对齐,使用的是 text-align-last:justi ...
office教程：excel表中数据的格式和对齐方式怎么操作
选中要设置对齐方式的单元格后,在"开始"选项卡下的"对齐方式"组中单击需要的对齐方式按钮,即可快速设置单元格的对齐方式了,如图所示. 除此之外,用户还可以在&q ...
css实现图片和文字水平居中对齐
一.通过vertical-align:middle实现现图片与文字水平对齐,需要区分html是行内元素,还是块状元素:例如:标签img.span是行内元素:标签p是块状元素则需要将标签p通过diapl ...
HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，
1 标签包含规范 ◆div可以包含所有的标签. ◆p标签不能包含div h1等标签. ◆h1可以包含p,div等标签. ◆行内元素尽量包含行内元素,行内元素不要包含块元素. 2 规避脱标流 ◆尽量使用 ...
cordova 不安全 css,[译] CSS Flexbox 中安全/不安全的对齐方式
CSS Flexbox 中安全/不安全的对齐方式我最近看了 Rachel Andrews 的演讲锦上添花:重新定义 CSS 的技术潜力.Rachel 的演讲总是能清晰而简洁地传达出满满的干货.这次演 ...
android按钮对齐方式,表格行中三个按钮的对齐方式Android
在线性布局内我的Actvity中有三个按钮. 在这里,我希望所有的按钮应该占据整个tablelayour同样. 所以我编码如下.表格行中三个按钮的对齐方式Android ...... android: ...

HTML中图片和文字的对齐方式

HTML中图片和文字的对齐方式相关推荐

最新文章

热门文章