zoukankan      html  css  js  c++  java
  • 在各浏览器和各分辨率下如何让div内的table垂直水平居中?

    本文主要针对需要全屏显示的系统页面内,因为系统经常会用到表格table布局,偶尔的table需要显示在div的正中间,所以鄙人特此总结下div内table的万千姿态。

    <!DOCTYPE html>
    <html>

    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

    <title>i冰冰的个人博客</title>

    </head>

    <body>
    <div style="500px;height:500px;background-color:Red;">
    <table style="100px;height:100px;background-color:Blue;">
    <tr>
    <td>
    喜欢你,始于颜值,陷于才华,忠于人品,痴于肉体,死于不敢主动。
    </td>
    </tr>
    </table>
    </div>
    </body>

    </html>
    ---------------------------------------

    红色div里有个蓝色table,现在table可以水平居中.请问:
    如何让table水平靠右或水平靠左?
    如何让table垂直居中或居上或居下?

    ---------------------------------------

    1.让table在水平方向上的靠左和靠右
    table水平靠左:
    <table style="100px;height:100px;background-color:Blue;margin:0px auto;" align="left">
    table水平靠右:
    <table style="100px;height:100px;background-color:Blue;margin:0px auto;" align="right">
    关于水平靠左靠右可以用:margin:0px auto; align="left" 或者" right";
    或者在div里面给这个table定义:div { text-align:right 或者 left}

    2.通过DIV控制TABLE--------》这里是正居中

    <style type="text/css">
    #Frame
    {
    500px;
    height:300px;
    background-color:#666666;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-250px;
    margin-top:-150px;
    }
    </style>

    ................
    <div id="Frame">
    <table>
    <table>
    <div>
    ................
    见证奇迹的时刻到了,垂直水平居中了有木有??

    3.对,你没看错,小结如下:

    所有的居中都可以用margin来实现,关于水平靠左靠右可以用:margin:0px auto; align="left" 或者" right";
    或者在div里面给这个table定义:div { text-align:right 或者 left}

    关于table整体垂直居中、靠上、向下,也可以用margin来完成,不过得根据div的高度和table的高度来决定,也就是说高宽都是死的固定值时可以用margin来做计算用。

    4.然如果div和table都用的百分比的话呢?

    <style type="text/css">
    #Frame
    {
    500px;
    height:300px;
    background-color:#666666;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-50%;
    margin-top:-30%; /*此处根据实际的页面情况去定义*/
    }
    </style>

    ................
    <div id="Frame">
    <table>
    <table>
    <div>
    ................

    在不固定值的百分比布局页面内,table也是可以乖乖的正居中在div内的。

    看官,请笑纳!冰冰奉上……

  • 相关阅读:
    No.5 Verilog 建模方式
    No.1 Verilog HDL简介
    [好文推荐]能大大提升工作效率和时间效率的9个重要习惯
    org.apache.commons.net.ftp.FTPClient上传文件大小改变的解决方法
    利用myeclipse建立webservice服务端和客户端
    FtpClient.storeFile返回false解决方法
    jquery表单formSerialize方法乱码问题解决
    Apache FTPClient下载地址
    Myeclipse发生java heap space错误
    UtraEdit的下载地址,无需注册码的
  • 原文地址:https://www.cnblogs.com/ibingbing/p/5832624.html
Copyright © 2011-2022 走看看