CSS中图片于文本的基线对齐设置

 文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。

设置各对象的vertical-align属性，属性说明：
baseline－将支持valign特性的对象的内容与基线对齐
sub－垂直对齐文本的下标
super－垂直对齐文本的上标
top－将支持valign特性的对象的内容与对象顶端对齐
text-top－将支持valign特性的对象的文本与对象顶端对齐
middle－将支持valign特性的对象的内容与对象中部对齐
bottom－将支持valign特性的对象的文本与对象底端对齐
text-bottom－将支持valign特性的对象的文本与对象顶端对齐
在此设置为text-bottom即可实现图片与文字位于同一水平线上，好看多了

如下：其他自己改

<span style="width:120px;"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目标任务</span>

实现图片于文字的底端对齐 

时间： 2024-08-30 21:18:37

CSS中图片于文本的基线对齐设置的相关文章

PHP file_put_contents()实现批量下载图片文件和css中图片代码

 代码如下 复制代码 set_time_limit(0);//设置PHP超时时间 $imagesURLArray = array_unique($imagesURLArray );   foreach($imagesURLArray as $imagesURL) {     echo $imagesURL;     echo "<br/>";     file_put_contents(basename($imagesURL), file_get_contents($ima

PHP批量下载html与css中图片文件实例

最近一直很忙,遇到一个手工活,需要下载一些远程的图片,一共一百多张,如果通过手工一张一张的保存,也太耗费时间了,于是上网google了一把,找到PHP批量下载图片文件的方法,原文是出自平凡世界博客的一片关于如何使用PHP批量下载CSS文件中的图片的文章.经过研究改写了一下就可以使用了,方便快捷多了. PHP批量下载图片文件代码:  代码如下 复制代码 set_time_limit(0);//设置PHP超时时间 $imagesURLArray = array_unique($imagesURLAr

css 中table的列宽怎样动态设置？

问题描述 css 中table的列宽怎样动态设置? css 中table的列宽怎样取外界div宽度与列中内容长度的最大值? 如上图,未对table的列宽做设置,当列中内容很长超出外界div宽度时,出现滚动条, 显示正常,但当列中内容长度小于外界div宽度时,蓝色阴影只是内容的长度,不能填充整行.求大神们帮忙解答一下,谢谢~~~ 解决方案 通过style设置min-width:30px为你div的宽度 解决方案二: jquery遍历一遍取div的scrollWidth,然后设置下td的宽度. 解决

实例说明CSS中图片实现大背景网站设计技巧

自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计. 经常会犯的错误:背景被裁减(查看示例) 查看示例文件,在小于1280分辨率时,是没有问题的.但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分. 实例1:一张图片(查看示例) 简单的http://www.aliyun.com/zixun/aggregation/74

php获取CSS文件中图片地址并下载到本地的方法_php技巧

本文实例讲述了php获取CSS文件中图片地址并下载到本地的方法.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: /**  * 获取CSS中图片地址,并且保存到本地  */ class getInCssImage {            /**           *  图片保存下来          * @param $cssUrl css的url地址          * @param $dir 保存图片的目录          * @return void        

php获取CSS文件中图片地址下载保存到本地

 代码如下 复制代码 /**      * 获取CSS中图片地址,并且保存到本地      */     class getInCssImage     {           /**          *  图片保存下来          * @param $cssUrl css的url地址          * @param $dir 保存图片的目录          * @return void          */         static public function save

css中vertical-align 图片文字水平对齐分析

vertical-align 定义 最初我认为的vertical-align 解释 跟text-align 一样,是容器内部的非block 元素居中对齐,但~~ 我理解错了 从w3c 官方对 vertical-align 各属性的解释来看,vertical-align 是定义当前节点,跟外围内容的对齐方式,跟text-align 的解释是不一样的. vertical-align:baseline 基线对齐 分析所得,发现baseline不是在中文字的可见部分最下方,而是在英文字的可见部分最下方.

CSS中vertical-align垂直对齐属性介绍

一向以来,我对vertical-align的属性都搞的不是太清楚,今天刚好碰到有朋友问我相关的问题,于是自己潜心研究了一番,发现这玩意还真不是个简单的东西,在此我分享的东西都是抛弃脑残的IE的,如果你用的是脑残的IE,请跳过此篇文章. 一.为什么我设置的vertical-align没用? 相信很多前端开发人员都遇到过这个问题,有的时候自己明明写了vertical-align属性值,但就是没效果,归其原因,是因为vertical-align是个比较奇葩的东西,想要让他起作用,就要投其所好. 我们知

CSS中的文本属性

本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性(Text) CSS 字体属性(Font) CSS3新增属性 文本阴影:text-shadow 文本溢出:text-overflow 这个属性一般需要配合overflow:hidden和white-spance:nowrap(强制文本容器不换行)使用. 文本换行:word-wrap word-brea