网页布局 CSS简单实现垂直居中
2008-10-17 19:25
681 查看
英文原文: http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文译文: http://www.12sui.cn/blog/71.html 本人英语还没过四级,所以不能说是翻译把,只能说是按照自己的理解去叙述了一遍作者的意思,请各位多多指教。
译文内容:
当你发觉你曾经以为的事实其实并不是那样,你会感觉很开心。
旧的方法
经常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向上居中,相信这也是很多设计师喜欢做的事情。首先,我们采用绝对定位的方法让元素离开顶部和左部 50% 的距离,然后我们需要设置一个负的 margin 来将元素拉回到中间的位置。
现在让我们来看一下这种方法的代码以及它所带来的问题:
CSS 代码:
HTML 代码:
你可以在 这里 看到这段代码的展示。
我为它设置了一个背景图片,仅仅是为了让它看起来更舒服一些,而我们真正需要注意的部分是中间那部分灰色的区域。
如你看到的那样,现在的结果正如我们想象的那样,那部分元素在水平和垂直的方向上完美的处在了中间的位置。这是按照我们最初提起的那种方式实现的,首先让元素在水平和垂直方向上离开 50% 的距离,然后设置负的 margin 让它回到中间的位置。
尽管表面上看来,现在的方法已经有效的达到了我们预期的目标,但是,同时也产生了严重的负面影响。当一个人将浏览器窗口变小,或者使用一个低分辨率的电脑时,那么居中的那部分元素的上部和左部将消失,即使通过滚轮的滑动,也无法看到。
当我们将窗口变小,就会看到如下图那样的情况:
文字的顶部和左部已经消失,而且,随着我们浏览器窗口的不断缩小,这段文字将最终离开我们的视线。为了弥补这些负的数值,我们为 body 设置了 min-width 和 min-height,但是你可以看到,这根本没有起到任何效果,那段文字依然停留在我们视线以外的地方。
上一页12 3 4 下一页
译文内容:
当你发觉你曾经以为的事实其实并不是那样,你会感觉很开心。
旧的方法
经常做的第一件事通常是如何在 CSS 中控制元素水平或者垂直方向上居中,相信这也是很多设计师喜欢做的事情。首先,我们采用绝对定位的方法让元素离开顶部和左部 50% 的距离,然后我们需要设置一个负的 margin 来将元素拉回到中间的位置。
现在让我们来看一下这种方法的代码以及它所带来的问题:
CSS 代码:
html,body{ height:100%; margin:0; padding:0; } body{ background:#eae7d7 url(images/vert-centre.jpg) repeat-x center center; text-align:center; min-width:626px; min-height:400px; } #vert-hoz{ position:absolute; top:50%; left:50%; margin-top:-198px;/* half elements height*/ margin-left:-313px;/* half elements width*/ width:624px; height:394px; border:1px solid silver; background:#666; overflow:auto;/* allow content to scroll inside element */ text-align:left; } h1 {color:#fff;margin:0;padding:0}
HTML 代码:
<div id="vert-hoz"> <h1>Content goes here</h1> </div>
你可以在 这里 看到这段代码的展示。
我为它设置了一个背景图片,仅仅是为了让它看起来更舒服一些,而我们真正需要注意的部分是中间那部分灰色的区域。
如你看到的那样,现在的结果正如我们想象的那样,那部分元素在水平和垂直的方向上完美的处在了中间的位置。这是按照我们最初提起的那种方式实现的,首先让元素在水平和垂直方向上离开 50% 的距离,然后设置负的 margin 让它回到中间的位置。
尽管表面上看来,现在的方法已经有效的达到了我们预期的目标,但是,同时也产生了严重的负面影响。当一个人将浏览器窗口变小,或者使用一个低分辨率的电脑时,那么居中的那部分元素的上部和左部将消失,即使通过滚轮的滑动,也无法看到。
当我们将窗口变小,就会看到如下图那样的情况:
文字的顶部和左部已经消失,而且,随着我们浏览器窗口的不断缩小,这段文字将最终离开我们的视线。为了弥补这些负的数值,我们为 body 设置了 min-width 和 min-height,但是你可以看到,这根本没有起到任何效果,那段文字依然停留在我们视线以外的地方。
上一页12 3 4 下一页
相关文章推荐
- CSS垂直居中网页布局实现的5种方法
- CSS垂直居中网页布局实现的5种方法
- CSS垂直居中网页布局实现的5种方法
- 寥寥几行CSS:实现某个div在网页中垂直水平居中呢
- css实现简单的水平垂直居中
- CSS里总算是有了一种简单的垂直居中布局的方法了
- footer固定在网页底部且居中,超过一屏自动撑开(最简单的CSS实现)
- Flexbox制作CSS布局实现水平垂直居中
- CSS实现已知宽高的div垂直居中;自适应高度两列布局
- CSS网页布局垂直居中整理
- 根据HTML+CSS完成一个三列布局,左右侧栏宽为180px,高为300px;中间栏自适应,高为300px;中间栏子元素(宽高不确定)实现水平、垂直居中。
- css布局:水平和垂直方向都居中,以及用flex实现
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
- CSS实现三栏布局和垂直居中
- CSS在页面布局中实现div垂直居中的方法总结
- CSS网页布局DIV垂直居中的各种方法
- 如何实现未知高居垂直居中?_div+css布局教程
- CSS网页布局:div垂直居中的各种方法
- 【转载】使用CSS简单实现垂直居中
- 实现CSS网页布局的简单原理