当前位置:首页> 随笔> 前端开发

图片与文字混排对齐CSS样式【vertical-align属性】

:2019-05-22   :舒彬琪   :74

Dreamweaver cs5中,当我们点击HTML网页中的图片时,可以设置图片与文字的混排对齐方式。但在Dreamweaver CS6破解版版本中,软件已经取消了这个对齐功能,这就需要我们自己在代码模式下给图片添加对齐的CSS代码了。

这些图片对齐方式都可以通过给图片添加vertical-align属性来控制他们的图文混排效果。例如:我们需要文字与图片居中对齐,就需要给图片的代码添加 style=" vertical-align:middle" 。

图片与文字混排对齐CSS样式

文字文字文字文字文字文字文字<img style="vertical-align:middle;" src="https://www.xuewangzhan.com/wp-content/themes/xwz/images/Course.png">

图片与文字混排时的对齐效果有:

baseline-将支持valign特性的对象的内容与基线对齐
sub-垂直对齐文本的下标
super-垂直对齐文本的上标
top-将支持valign特性的对象的内容与对象顶端对齐
text-top-将支持valign特性的对象的文本与对象顶端对齐
middle-将支持valign特性的对象的内容与对象中部对齐
bottom-将支持valign特性的对象的文本与对象底端对齐
text-bottom-将支持valign特性的对象的文本与对象顶端对齐