高固定情况下的水平及垂直居中

原创 2007年09月29日 09:54:00

  哇,好久没有Blog一下了,最近实在是忙晕了头,当然不仅仅是工作的问题,还有其它的。

  今天终于是忙里偷闲,好不容易有点时间更新一下Blog了,却被蜘蛛网似的杂乱无章的引用,留言,评论给搞得不爽,准备等再有时间就把“引用”什么的功能去掉,太多垃圾引用了。

  发现好长一段时间或者说一直以来,很多同学都对居中这个话题十分感兴趣,当然这里既有水平居中也包括垂直居中。

  相信水平居中大家都已经了解并会使用了,无非就text-align:center这样,还有为了兼容不可或却的margin:auto。

  某样功能或效果的实现其实都是依据一定的原理基础上的,有的东西只要明白了它的原理,至于有多少种实现方法和各方法的写法优劣这都会因个人对原理的理解程度不一而有所不同。

  扯远了,还是回来聊所谓的垂直居中(要垂直居中的这个东东的高度是即定的)。

  如,要使得一个高150px,宽任意的东东在浏览器中垂直居中:

  [演示地址:http://www.doyoe.com/model/xhtmlcss/style/cenmid.htm

CSS部分:

html,body {
 margin:0;
 font:12px/180% "宋体";
 text-align:center;
 height:100%;
}
#main {
 margin:0 auto;
 width:300px;
 height:150px;
 background-color:#ddd;
 text-align:left;
 overflow:hidden;
 position:relative;
 top:50%;
 margin-top:-75px;
}
#main h3 {
 margin:0;
 font:bold 18px/150% "宋体";
}

XHTML部分:

<!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=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>传说中的水平及垂直居中(高固定)</title>
</head>
<body>
<div id="main">
  <h3>传说中的水平及垂直居中</h3>
  <ul>
    <li>传说中的水平及垂直居中</li>
    <li>传说中的水平及垂直居中</li>
    <li>传说中的水平及垂直居中</li>
    <li>传说中的水平及垂直居中</li>
    <li>传说中的水平及垂直居中</li>
  </ul>
</div>
</body>
</html>

  如上面这个例子,就已经实现了高为150px的div垂直居中 。

  XHTML部分没有什么值得考究的,只需要看一下CSS部分就行了。首先我们知道要使得一个东东始终呆在浏览器的某个位置,这需要用到position,然后通过top,right,bottom,left来控制具体位置。

  要使得这个div垂直居中,OK,肯定会想到top:50%。这样其实div的顶部就已经是垂直居中了,但对于整个div来说还并没有垂直居中,所以它需要以顶部作为轴心向上移动若干像素,移动多少呢?废话,当然是这个div实际高度的一半:75px。这样就能保证轴心上下的高是一样的,也就是说整个div就实现垂直居中了。

  然而为什么要指定html,body{height:100%}呢?这和position:relative有什么联系呢?自己去想,呵呵。

 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

在固定尺寸的盒子,水平垂直居中不知宽高的图片

css布局

CSS行高——line-height 文本的垂直居中(display:block;情况下)

初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知...

大小不固定的图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居中显示,...

大小不固定的图片、多行文字的水平垂直居中

本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直...

CSS实战技巧:图片(大小不固定)的水平垂直居中

1.display:inline-block和文字大小控制居中如果图片和文本处于一行时,可采用这种方法。 html代码 关注我们: css代码.box { ...

大小不固定的图片、多行文字的水平垂直居中

大小不固定的图片、多行文字的水平垂直居中 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinx...

不固定高度水平垂直居中

页面不固定高度垂直居中,很多时候会想到用display:table;content高度可自适应,缺点多一层div标签,(ie7以下包括ie7出错)demo如下: ...

未知尺寸图片在固定高度容器中的水平和垂直居中

例①:===================================== **html:** **css:** .box{ width:200px; hei...

大小不固定的图片和多行文字的垂直水平居中

<!-- p {padding:5px 0} .zxx_align_box_1 {height:3em; line-height:3em; padding:0 1em; bor...
  • ecole
  • ecole
  • 2012-05-07 14:32
  • 375

大小不固定的图片和多行文字的垂直水平居中

css
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)