易截截图软件、单文件、免安装、纯绿色、仅160KB

用DIV+CSS布局中,如何设置图片与文字在同一高度?


如果把文字和图片放在同一个图层的,文字可以做到居中,但是图片就不能,因为图片默认是左上对齐的!这就是为什么在制作的时候看到图片
会靠上的原因。如果你令到图片居中了,文字就会相对于图片右下对齐了!如果你想2个都居中的话,就不能把他们放在同一个div,或者你试下
把他们放在2个div中,或者一个图片放div中,文字直接放页面中,不放div ,这样还可以给网页瘦身。
把那个放图片和文字的层css设置为比如id叫#aa
#aa {height: 30px; line-height:30px; vertical-align: middle;}
这样就可以使里面的东西在层里垂直居中了。一定要设置相同高度和间距。
把图片加上align="absmiddle"
<img src="http://img.baidu.com/img/logo-zhidao.gif" align="absmiddle" />
我是用这个方法解决的。
我的文字和图片在同一个span里面,我在图片中加上这个属性就解决问题了。但是直接写在页面里面是否有表现和结构不分离的嫌疑呢?呵呵
补充下:文字居中的,只要用line-height就可以控制居中,图片居中的话,要用padding或者margin!
   DIV没有文字垂直居中属性,这个确实是个缺陷问题。
需要把图片和单行文字垂直居中对其,可以给图片 的CSS 定义一个vertical-align: middle; 的属性,这样 单行文字就可以垂直居中于图片了。
  如果多行,只能采用嵌套DIV 的方式,然后调整margin 不要调整padding。 在IE6里面定义了 高度 或者宽度的DIV 使用padding会出现bug。
  另外可以使用原本的办法,给图片内部设置属性align="absmiddle"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div 里面图片垂直居中的几个例子</title>
<style type="text/css">
<!--
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
text-align:center;
}
div dt {
+position:absolute;
top:50%;
vertical-align:middle
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
-->
</style>
</head>
<body>


相关文档:

css中 id和class区别与使用

id和class到底要用哪一个?
  首先要明白id和class的各自的优缺点。这样才能根据他们的各自的特点进行使用。
  id的优点(class的缺点):id写在css用"#"选择器,class写在css中用"."选择器。"#"选择器的优先级高于"."选择器大约10倍,所以当你需要提升优先级的时候,id标签,或者id容器内的标签将是很容易和有效的。 ......

css 控制 GridView 样式

.net中 css 控制 GridView 样式
.net 2007-07-23 10:42:11 阅读1173 评论0 字号:大中小
.GridViewStyle
{   
    border-right: 2px solid #A7A6AA;
    border-bottom: 2px solid #A7A6AA;
    bo ......

建站DIV+CSS 之网页切图过程中div+css命名规则

  内容:contentcontainer 导航:nav 侧栏:sidebar
  栏目:column 标志:logo 页面主体:main
  广告:banner 热点:hot 新闻:news
  下载:download 子导航:subnav 菜单:menu
  搜索:search 页脚:footer 滚动:scroll
  版权:copyright 友情链接:friendlink 子菜单:submenu
  内容:content ......

CSS笔记

一、星号*
应该是个通配符。比如
<style type="text/css">
.roundBorder *
{
 background: white;
 display: block;
 height: 1px;
 overflow: hidden;
}
</style>
……
 <b class="roundBorder">
 <b class="round ......

CSS在MyEclipse下无法载入问题。

在JSP页面上加入
<%String path = request.getContextPath();%>
<link  href="<%=path%>/css/style.css" rel="stylesheet" type="text/css">
下列方式貌似不行:
<link  href="../css/style.css" rel="stylesheet" type="text/css">
<link  href="../../css/style.css" rel ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号