制作页面的时候经常遇到一个CSS问题就是无法让内容(文字、图片)在div中垂直居中,如:.

CSS 代码:

#pro_1 {height:100px;display:block;overflow:hidden;padding:2px;}.proimg {vertical-align: middle;height:100%;}

但是有时效果不好,所以经常会用padding-top的方式去解决距中问题,但这种方法不能动态的解决不同高度下的内容垂直居中问题,谁能提供一个更好的规范的方法?

2010-10-26 05:01:23

4 Answers

vertical-align:middle; 这个是没用的,文本垂直得设置行高(line-height:200px;),把行高设置成跟容易一样高度就可以了 #text{ width:200px; height:200px; text-align:center; border:#FF0000 1px solid; line-height:200px; }
2010-10-26 06:02:45
div中加一个s作为填充,对未知高度的图片很有效
<div id="pro_1"> <span class="proimg" ><img src="/face.gif" /></span> <span class="infopro" >个人信息介绍...</span> <!-- <s>标签作为内部填充 --> <s></s> </div> /*css*/ s{display:inline-block; height:100%; vertical-align:middle;}

在div中加一个s作为填充,对未知高度的图片很有效。具体原理忘了。

2010-10-26 07:21:49

单行居中:

line-hight:100px;

hight:100px;

2010-10-26 09:17:58

先给你一个针对所有浏览器,且方法简单的demo。

<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="简单的HTML页面" /> <meta name="Description" content="这是一个简单的HTML页面" /> <title>简单的HTML页面</title> </head> <body> <style type="text/css"> .box { display: table-cell; vertical-align:middle; width:200px; height:200px; text-align:center; /* hack for ie */ *display: block; *font-size: 175px; /* end */ border: 5px solid red; } .box img { vertical-align:middle; } </style> <div class="box"> <img src="http://www.google.com.hk/images/srpr/logo3w.png" alt="" /> </div> </body> </html>


重点是HACK的地方。因为对其他标准浏览器的话不需要HACK的地方
2010-10-26 08:18:48
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制