网页页面合理布局 CSS简易完成竖直垂直居中

日期:2021-03-16 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5


英文原文:
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
汉语译文:
http://www.12sui.cn/blog/71.html
自己英语还没过4级,因此不可以说是汉语翻译把,只能说是依照自身的了解去描述了1遍作者的意思,请各位多多指教。
译文內容
当你发现你以前认为的客观事实实际上其实不是那样,你会觉得很高兴。
旧的方式
常常做的第1件事一般是怎样在 CSS 中操纵元素水平或竖直方位上垂直居中,坚信这也是许多设计方案师喜爱做的事儿。最先,大家选用肯定精准定位的方式让元素离去顶部和左部 50% 的间距,随后大家必须设定1个负的 margin 来将元素拉返回正中间的部位。
如今让大家看来1下这类方式的编码和它所带来的难题:
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:⑴98px;/* half elements height*/
margin-left:⑶13px;/* 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>

你能够在 这里 看到这段编码的展现。

我为它设定了1个情况照片,仅仅是以便让它看起来更舒适1些,而大家真实必须留意的一部分是正中间那一部分灰色的地区。
如你看到的那样,如今的結果正如大家想像的那样,那一部分元素在水平静竖直的方位上完善的处在了正中间的部位。这是依照大家最开始提到的那种方法完成的,最先让元素在水平静竖直方位上离去 50% 的间距,随后设定负的 margin 让它返回正中间的部位。
虽然表层上来看,如今的方式早已合理的做到了大家预期的总体目标,可是,另外也造成了比较严重的负面危害。当1本人将访问器对话框缩小,或应用1个低辨别率的电脑上时,那末垂直居中的那一部分元素的上部和左部将消退,即便根据滚轮的拖动,也没法看到。
当大家将对话框缩小,就会看到以下图那样的状况:

文本的顶部和左部早已消退,并且,伴随着大家访问器对话框的持续变小,这段文本将最后离去大家的视野。以便填补这些负的标值,大家为 body 设定了 min-width 和 min-height,可是你能够看到,这压根沒有起到任何实际效果,那段文本仍然滞留在大家视野之外的地区。
上1页12 3 4 下1页 阅读文章全文
上一篇:常见CSS缩写英语的语法总结 返回下一篇:没有了