网页制作中的水平居中和垂直居中解决方案

2016-02-20 00:16 14 1 收藏

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的网页制作中的水平居中和垂直居中解决方案教程,一起来看看吧!超容易上手~

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/) 在定义网页的CSS样式的时候,我们或许并不怎么用到垂直居中。在webjx.com中,大量的文章介绍了这些知识。在和别人合作的时候,你的代码的自适应性就需要做到最大程度的好。你自己在做自己的网页的时候或许可以保证在视觉上是居中的,但是如果让这个元素或者他的父元素变大了,你还能保证居中吗?

  vertical-align是个不错的属性,但是这个属性起初是针对表格的cell的。当然这个属性虽然对块级元素不起作用,但是对行内元素比如span还是有作用的(这时候,这个属性设置为负值元素内容就下移,正值则上移)。

  下面是比较专业的垂直居中的集中解决方案。记录于此,以便查阅。

1、单行垂直居中

  文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同! 

div style="line-height:500px;height:500;"
2、层水平居中

  设置div的宽度小于父div的宽度,设置 margin:0 auto;,即可让div居中。

#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
}
3、层中的文字水平居中

  在childdiv的css加上text-align:center;

#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
text-align:center;
}
4、div层垂直居中

div style="width:275px;height:375px;border: solid red;"
div style=" background:green;height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;"
     div
           style=" background:red;position:static;position:absolute9; top: 50%;"
        div
            style=" background:blue;position: relative; top: -50%;"
                     www.webjx.com
         /div
      /div
   /div
/div
5、div层垂直水平居中,英文超长换行

   div style="float:left;width:275px;height:375px;border: solid red;"
div
          style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;"
          div
           style="position:static;position:absolute9; top: 50%;"
           div style="position: relative; top: -50%; text-align: center;"
              div style="width: 85px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;margin:0 auto;"
            www.webjx.comwww.webjx.comwww.webjx.comwww.webjx.comwww.webjx.comwww.webjx.comwww.webjx.com 
              /div
                     
              /div
          /div
         /div
/div
6、div垂直滚动

div
              style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;"


              www.webjx.com
             /div
7、垂直居中和使用text-align水平居中

div style="float:left;width:275px;height:375px;border: solid red;"
div
          style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;"
          div
           style="position:static;position:absolute9;top: 50%;"
           div
            style="position: relative; top: -50%; text-align:center;"
            div style="width: 275px;"
                      div style="width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;text-align:left;"
            www.webjx.comwww.webjx.comwww.webjx.comwww.webjx.comwww.webjx.comwww.webjx.comwww.webjx.com
              /div
              /div
                     
              /div
          /div
         /div
/div
8、垂直居中和使用margin水平居中

    div style="float:left;width:275px;height:375px;border: solid red;"
div
          style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;"
          div
           style="position:static;position:absolute9; top: 50%;"
           div
            style="position: relative; top: -50%; "
            
                      div style="margin:0 auto;width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;"
            www.webjx.comwww.webjx.comwww.webjx.comwww.webjx.comwww.webjx.comwww.webjx.comwww.webjx.comwww.webjx.com
              /div
             
                     
              /div
          /div
         /div
/div

来源:http://www.tulaoshi.com/n/20160220/1631572.html

延伸阅读
标签: Web开发
  1、说明本文阐述了8条我们发现的在用CSS设计中有用的解决方案。 2、浏览器特定的选择器 查看原文:http://diger.cn/blog/?p=324 英文地址:  http://www.solidstategroup.com/page/1592 翻译说明: 这是Solid State Group网站上的一篇很友好的文章,解决了我在设计中遇到的很多问题,故在此我翻译其文,并对
标签: Web开发
经过今天一翻改进,终于找出了解决DIV垂直居中的办法。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/ht...
标签: Web开发
用Table布局可以很容易的实现文字和图片的垂直居中,但是在div的布局中呢,要实现定高容器里面的内容的垂直居中不是太简单的事情。 在DOM标准中 在IE中 综合 #boxOuter {     display:table;     height:300px;     width:500px;     border:solid 1px black;   &n...
标签: Web开发
在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果,这是在页面布局中基本,也是最应该首先掌握的知识。不过,还是经常会有人问到这个问题,在这里我简单总结一下使用Div和CSS实现页面水平居中的方法: 一、margin:auto 0 与 text-aligh:center     在现代浏览器(如Internet E...
标签: Web开发
div style="position:absolute; top:50%; left:50%; margin:-200px 0 0 -275px; width:550px; height:400px"内容。图片文字flash等。请注意,div宽度高度以及margin负值需针对内容进行相应设置/div 说明: 绝对定位div position:absolute; 顶部和左边距 top:50%; left:50%; 使用外补丁 margin 负值,负值大小为层自身高度宽度各除以二 margi...

经验教程

107

收藏

51
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部