想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞.

拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox.

这里涉及到两个属性,一个是line-height,另一个是vertical-align。在IE里面,只需要line-height就可以实现这个效果,不过要想在firefox和opea里面也实现这样的效果,必须用到vertical-align,而且这是属性一定要定义在image上面,而不是定义在div上。

div:

<style type="text/css">
<!--
a
{
color:#6096cf;
text-decoration:none;
font-size:12px;
}
.divcss{
width:500px;
height:12px;
vertical-align:middle;
text-align:position;
} .divcss img{
vertical-align:middle; /*optional*/
} .divcss a{
vertical-align:middle; /*optional*/
}
-->
</style>

  

顶顶顶顶<div id="AA" class="divcss"><img src="WebResourcef.gif" width="19" height="20" /> <a href="javascript:DoPostBack('1','A');" >A--马克思马克思主义、列宁主义、毛思想、邓理论</a></div>
    <div id="A"></div>

div css 图片和文字上下居中对齐的更多相关文章

  1. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  2. [CSS]图片与文字对齐问题

    摘自:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 图片与文字默认是居底对齐了.所以当图片与文字在一起的时候往往都是不对齐的.尤其图片较小时就更加明显了,我看到很多人使 ...

  3. checkbox和后面文字无法居中对齐的解决方案

    制作前端页面时,表单的页面中都存在表单元素与提示文字无法对齐的问题.下面是针对这一问题的解决方案: 先上结果图看效果,吼吼~ 最上面两个是经过css处理后的效果,已经居中对齐了哦~,最后一个是没有处理 ...

  4. iOS小知识:使UIButton中的图片和文字实现左对齐

    UIButton setImage 和 setTitle之后,默认的 image和title 对齐方式是居中, 由于 title 长度不固定,所以如果要几个这样有image有title的按钮纵向排列对 ...

  5. 问题2:css图片、文字居中

    1. 文本或图片水平对齐:父元素中添加以下样式     text-align : center;2. 单行文字垂直对齐:父元素中添加以下样式     line-height : 父元素高度; 3.图片 ...

  6. PHP合成图片、生成文字、居中对齐、画线、矩形、三角形、多边形、图片抗锯齿、不失真 高性能源码示例

    function generateImg($source, $text1, $text2, $text3, $font = './msyhbd.ttf') { $date = '' . date ( ...

  7. css中使input输入框与img(图片)在同一行居中对齐

    input,img{vertical-align:middle;},同时设置input和img的vertical-align属性,兼容ie7

  8. DIV+CSS如何让文字垂直居中?(转)

    此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少 ...

  9. DIV+CSS如何让文字垂直居中?

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. win2008 401 - 未授权: 由于凭据无效,访问被拒绝。解决方法

    iiis中一个小配置的问题,“身份验证”里面“启用匿名身份验证”,编辑匿名身份验证凭据,选中下面的“应用程序池标识”  就可以了

  2. 【转载】DRuid 大数据分析之查询

    转载自http://yangyangmyself.iteye.com/blog/2321759 1.Druid 查询概述     上一节完成数据导入后,接下来讲讲Druid如何查询及统计分析导入的数据 ...

  3. Flex4之皮肤定制

    Flex4之皮肤定制[Skin类和Skin类]          博客分类: RIA-Flex4专栏 FlexAdobeUPFlashUI 第一.关于spark.skin.SparkSkin类的 1. ...

  4. jmeter 上传附件 如图片

    1.要勾选 Use multipart/form-data for POST,否则request中将不包含上传的文件 2.MIME类型为application/octet-stream 图如下:对应 ...

  5. JS前端编码规范

    转自<前端编码规范之JavaScript>,网址:http://www.cnblogs.com/hustskyking/p/javascript-spec.html 一个是保持代码的整洁美 ...

  6. python--网络编程requests

    一.requests 之前使用python自带的urllib模块去请求一个网站或者接口,但是urllib模块太麻烦了,传参数的话,都得是bytes类型,返回数据也是bytes类型,还得解码,想把返回结 ...

  7. 老男孩九期全栈Python之基础一

    ---恢复内容开始--- day1 12.while 体验while的执行方式和效果,用多种方法输出1~100 while 1: print('我们不一样') print('在人间') print(' ...

  8. Docker 容器技术

    前言: 之前感觉Docker是一种小虚拟机,docker和KVM虚拟机之间有什么区别.联系.可以应用在什么样的生产环境? 一.Docker是什么以及和KVM的区别 1.docker概念? Docker ...

  9. pytest pluggy.manager.PluginValidationError: unknown hook 'pytest_namespace'报错处理办法

    一.背景说明 上周测试的同事说pytest+allure环境在别人电脑上跑没问题,在她的环境跑却报错让帮看一下.其实pytest只是听说过allure直接没听过,但不能直接表示不会,祭出百度大法. 看 ...

  10. 【Python】Part1 应用1-Netcat

    01 简介 netcat的主要功能是通过tcp或udp协议传输读写数据. 下面代码用python编写了tcp客户端,服务端,从而实现上传文件,本地执行命令,反弹shell三种功能. 02 代码 imp ...