尽管有 CSS 的 vertical-align 特性,但是并不能有效解决未知高度的垂直居中问题(在一个 DIV 标签里有未知高度的文本或图片的情况下)。请问如何解决

2011-02-17 19:15:30

5 Answers

标准浏览器如 Mozilla, Opera, Safari 等.,可将父级元素显示方式设定为 TABLE(display: table;) ,内部子元素定为 table-cell (display: table-cell),通过 vertical-align 特性使其垂直居中,但非标准浏览器是不支持的。 非标准浏览器只能在子元素里设距顶部 50% ,里面再套个元素距顶部 -50% 来抵消。 CSS部分: body { padding: 0; margin: 0;} body,html{height: 100%;} #outer {height: 100%; overflow: hidden; position: relative; width: 100%; background:ivory; } #outer[id] { display: table; position: static; } #middle { position: absolute; top: 50%; } /* for explorer only*/ #middle[id] { display: table-cell; vertical-align: middle; position: static; } #inner { position: relative; top: -50%; width: 400px; margin: 0 auto; } /* for explorer only */ div.greenBorder { border: 1px solid green; background-color: ivory;} xhtml部分: <div id="outer"><div id="middle"><div id="inner" class="greenBorder"></div></div> </div> 以上 CSS 代码的优点是没有 hacks,采用了 IE 不支持的 CSS2 选择器 #value[id] 。 CSS2选择器 #value[id] 相当于选择器 #value ,但是 Internet Explorer 不支持这种类型的选择器。同样地 .value[class] ,相当于 .value ,这些只有标准浏览器能读懂。
2011-02-17 21:31:25

像这种问题直接搜百度前几页应该都是吧! 

body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}

html:

  
<div id="outer"> <div id="middle"> <div id="inner" class="greenBorder"> </div> </div> </div>
2011-02-17 23:01:30

这个是做前端工程师必备的考题,CSS垂直居中的方法有很多,这里很详细了列举了5种方法来实现你说的问题:

CSS实现垂直居中的5种方法

2011-02-18 00:02:37

我一般是使用绝对定位的 div,把它的 top 设置为 50%,top margin 设置为负的 content 高度。而对象在 CSS 中可以指定固定的高度。

因为有固定高度,可以你想给 content 指定 overflow:auto,这样如果 content 太多的话,就会出现滚动条,以免content 溢出。

以下我大概写了个例子 

<div class="content">
 Content goes here
</div> 
#content { position:absolute; top:50%; height:240px; margin-top:-120px; }
2011-02-18 02:06:14
<div id="photo">
    <img src="img01.jpg" alt="something" />
</div> 

CSS代码: 

<style type="css/text"> *{ margin:0; padding:0; } body{ font:12px/150% Verdana, Arial, Helvetica, sans-serif; } #photo{ display:table-cell;/* for not IE browsers*/ text-align:center; vertical-align:middle; height:300px; width:400px; +display:block; +font-size:270px;/* 这里是height*0.9,估计在0.9左右比较接近FF和Opera*/ +font-family:"Times New Roman", Times, serif;/* Don't miss here!*/ } img{ vertical-align:middle; } </style>
2011-02-18 03:47:08
您不能回答该问题或者回答已经关闭!

相关文章推荐

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

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

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

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

  • 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#基础概念之延迟加载

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

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

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

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

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

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

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