zoukankan      html  css  js  c++  java
  • css水平竖直居中方式

    CSS水平和垂直居中的几种实现方法:

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

     <div style="line-height:500px;height:500;">  

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

    #parentdiv 

       500px; 

    #childdiv { 
       200px; 
      margin:0 auto; 
    }  

    3、层中的文字水平居中 
    在childdiv的css加上text-align:center; 
      
    #parentdiv 

       500px; 

    #childdiv { 
       200px; 
      margin:0 auto; 
      text-align:center; 
    }  

    4、div层垂直居中 
    <div style="275px;height:375px;border: solid red;"> 
      <div style="background:green;height: 375px;  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%;"> 
           book.chinaz.com  
          </div> 
        </div> 
      </div> 
    </div>  

    5、div层垂直水平居中,英文超长换行 
    <div style="float:left;275px;height:375px;border: solid red;"> 
      <div style="height: 375px;  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=" 85px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;margin:0 auto;"> 
              book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com
            </div> 
          </div> 
        </div> 
      </div> 
    </div>  

    6、div垂直滚动 
    <div style=" 160px; height: 260px; overflow-y: scroll; border: 1px solid;"> 
      book.chinaz.com  
    </div>  

    7、垂直居中和使用text-align水平居中 
    <div style="float:left;275px;height:375px;border: solid red;"> 
      <div style=" height: 375px;  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=" 275px;"> 
              <div style=" 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;text-align:left;"> 
                book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com 
              </div> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div>   

    8、垂直居中和使用margin水平居中 
    <div style="float:left;275px;height:375px;border: solid red;"> 
      <div style=" height: 375px;  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; 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;"> 
              book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com book.chinaz.com 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 

    http://www.pc6.com/infoview/Article_45869.html

  • 相关阅读:
    .Net开源Excel、Word操作组件-NPOI、EPPlus、DocX[转]
    遥感数据下载地址
    在c#中把字符串转为变量名并获取变量值的小例子(转)
    【转】 C# 小技巧之获取变量名称
    arcgis desktop按ctrl键后地图乱移的解决办法
    怎么提高ArcSDE 写入地理数据库的效率
    HowTo Perform the spatial selection 'Share a line segment with' using ArcObjects
    [翻译]Shape comparison language
    Shape comparison language
    [翻译]Shape comparison language[转]
  • 原文地址:https://www.cnblogs.com/muqiangwei/p/5317421.html
Copyright © 2011-2022 走看看