1. 横向对齐方式

图片横向对齐，即水平方向向上进行对齐；对齐样式与文字对齐，都有 3 种对齐方式，分别为左、中、右；
若要定义图片对齐方式，不能在样式表中直接定义图片样式，需要在图片的上一个标记级别，即父标签级别定义对齐方式，让图片继承父标记的对齐方式；
这是因为 img（图片）本身没有对齐属性，需要使用 CSS 继承父标记的 text-aling 来定义对齐方式；

例子 1：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片横向对其</title></head><body><p style="text-align: left;"><img src="6.gif" style="max-width: 140px;"/>图片左对齐</p><p style="text-align: center;"><img src="6.gif" style="max-width: 140px;"/>图片居中对齐</p><p style="text-align: right;"><img src="6.gif" style="max-width: 140px;"/>图片右对齐</p></body>
</html>

2. 纵向对齐方式

纵向对齐，即垂直对齐，在垂直方向上和文字进行搭配使用；
通过对图片垂直方向上的设置，能设定图片和文字高度一致；
使用 vertical-align 属性定义图片纵向对齐；
vertical-align 属性设置元素的垂直对齐方式，即定义行内元素的基线相对于该元素所行的基线的垂直对齐；
允许指定负长度值和百分比值，这会使元素降低而不是升高；
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式；
语法格式如下所示：

vertcal-align:baseline | sub |super |top |text-top | middle |bottom |text-bttom |length

例子 2：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片纵向对齐</title><style>img{max-width: 100px;}</style></head><body>              <p>纵向对其方式：sub<img src="6.gif" style="vertical-align: sub;"/></p><p>纵向对其方式：super<img src="6.gif" style="vertical-align: super;"/></p><p>纵向对其方式：数值定义<img src="6.gif" style="vertical-align: 20px;"/></p><p>纵向对其方式：baseline<img src="6.gif" style="vertical-align: baseline;"/></p><p>纵向对其方式：middle<img src="6.gif" style="vertical-align: middle;"/></p></body>
</html>

CSS 3之图片对齐方式相关推荐

CSDN markdown编辑器设置文字图片对齐方式
markdown本身没有提供对齐的语法,但是可以通过使用html标记语言实现文字和图片的对齐文字对齐方式使用<p>的align标签实现文字对齐 <p align="ce ...
php 给字符中间添加间距,html中的字符间距怎么设置？css样式设置文本对齐方式总结...
我们经常用的html字符间距总是不好设置,html的文本对齐方式也不会设置,现在这篇文章就来帮助大家了,这里有关于html 字符间距的调整,还有文本的对齐方式设置,现在让我们来看看这篇文章吧首先我们 ...
CSS设置下划线对齐方式,如何巧妙利用CSS自定义网页下划线样式
如何巧妙利用CSS自定义网页下划线样式 CSS为网页设计者们提供了丰富而灵活的页面元素表现形式的控制手段.但是,或许你可能注意到了,对于下划线,CSS提供的可选操作却不是很多.一般情况下,人们看到的下 ...
html语言图片对齐方式的设置
使用<img>标签使图片左对齐或右对齐 <img src="D:\games\Wesnoth\editor.ico" align="left" ...
CSS控制图片大小、边框、对齐方式、文字环绕
CSS操作图片大小 width属性和height属性可以用于定义图片大小. width属性和hieght属性的属性值都是像素. CSS操作图片边框 border-width属性用于定义<img& ...
CSS 之控制图片与文字对齐
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...
CSS中文本对齐方式-文本处理案例
多行文本垂直居中父级 display: table;子级 display: table-cell; vertical-align: middle; text-align: center; 文本对齐方 ...
CSS入门（CSS常用属性----字体、对齐方式、display属性、浮动）
CSS常用属性设置 3.字体设置字体 font-family ①当font-family的属性值包含空格或特殊字符时,需要将font-family的属性值用引号括起来. ②font-family有& ...
MarkDown内如何调整图片的尺寸及对齐方式？
前言想发布已经写好的MarkDown文档,需要手动调整的地方只有图片.原因是默认插入的图片太大的话,图片会占满屏幕,导致浏览不便. 个人体验:常见的横屏情况下,一张图片不宜超过2/3屏幕高度,主体内 ...

CSS 3之图片对齐方式

图片对齐方式

1. 横向对齐方式

2. 纵向对齐方式

CSS 3之图片对齐方式相关推荐

最新文章

热门文章