当前位置: Home / 设计开发 / CSS

CSS解决未知高度垂直居中

九月 7, 2009 by zeze · Leave a Comment   

原文标题：Vertical Centering in CSS
副标题：Yuhu’s Definitive Solution with Unknown Height

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

标准浏览器如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 */
*+html #outer[id] {position: relative;} /* for IE7 */
*+html #middle[id] {position: absolute;} /* for IE7 */
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,这些只有标准浏览器能读懂。

测试：Firefox、Opera9.0、IE6.0、IE7.0、IE5.0通过。

效果演示

转自:蓝色理想

原文：CSS解决未知高度垂直居中 | web启点

Filed under CSS, 设计开发 · Tagged with , ,

我最常用的10个CSS类

九月 6, 2009 by zeze · Leave a Comment   

在指定类名到元素时，许多开发人员常常感到困惑，而且他们也常常在最后才会发现使用的类竟然是错误的。

类名不应当描述元素看起来像什么或在哪里使用它。一个良好的类名应该说明它代表的是些什么内容或功能。这是我最常用的10个类名及其解释，希望能给你一个明确的应该使用什么样的类名的概念。

class=”fixed”

我在每个样式表中都使用这个类名。我将这个类指定在包含浮动子元素的容器上。我要用它来清除该容器内的浮动，使用这些代码：

.fixed:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}
.fixed{
	display:block;
	}
/*  */
.fixed{
	min-height:1%;
	}
* html .fixed{
	height:1%;
	}

阅读全文 >>

Filed under CSS, 设计开发 · Tagged with

Pure CSS Animated Progress Bar(纯粹的CSS进度条)

九月 5, 2009 by zeze · Leave a Comment   

Here’s a simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements.

Take a look at the demo | Download zip file(下载)

The Concept

We’ll put a cool background image in the container and define fixed width and height. First child (SPAN) will act as a progress bar. We’ll absolutely position second child (EM) above the progress bar and shift it to the left to a desired value. EM has the same background as the container so it gives an effect of progress bar stopping at certain percentage.

pure css progress bar scheme

Markup

To keep it as meaningful as possible I used definition list (DL) to list for several values. For single progress bar you can use any element you want. I love paragraphs so I used P in my example.

<dd>
	<span><em style="left:100px">50%</em></span>
</dd>

I decided to use inline styles for left EM placement. It is more convenient to write both values at the same place at once.

Animation

How is it done? Using animated gif of course. Remember those? SPAN has a 200px wide background gif that animates from “zero” to 200px. No matter what percentage we use it goes all the way and stops. Effect of stopping at certain percentage is done with EM as I mentioned earlier.

EM placement

In my example I use 200 pixels wide progress bar. EM element is also 200px wide. So each percentage is 2px wide. If we want to accurately shift the EM we need to multiply percentages with 2.
i.e. 50% will mean 100px left offset, 24% will mean 48px offset, 75% – 150px etc. You get the picture. :)

原文：Pure CSS Animated Progress Bar(纯粹的CSS进度条)

Filed under CSS, 设计开发 · Tagged with ,

Pages: ◄ 1 ... 5 6 7