zoukankan      html  css  js  c++  java
  • 小经验:display:table 和 verticalalign:middle 控制 块元素垂直居中

    见代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>HTMLiveCode</title>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
            <style type="text/css">
                div{
                    width:200px;
                    height: 200px;
                    border:1px red solid;
                    display:table;  // 父元素设置为table
                }
                p{
                    width:100px;
                    height:100px;
                    border:1px blue solid;
                    word-break:break-word;
                    display:table-cell;    // 居中的地方设置为table-cell
                    vertical-align:middle;   // 居中
                    text-align: center;
                }
            </style>
            <script type="text/javascript">
                
            </script>
        </head>
        <body>
            <div class="a">
                <p>ddddddddddddddddddddddddddssssssssssssssssssssssssssssssssssssssssssssssssssssssd</p>
            </div>
        </body>
    </html>

    结果见图:

  • 相关阅读:
    ant中build.xml文件解释
    mysql练习题
    Mysql基本知识
    Python Socket 简单聊天室2
    Python Socket 简单聊天室1
    Python 导入模块
    Python 文件的处理
    Python yield
    Python 内置函数
    Python 生成验证码
  • 原文地址:https://www.cnblogs.com/zjfazc/p/2628812.html
Copyright © 2011-2022 走看看