zoukankan      html  css  js  c++  java
  • 多行文本垂直居中div高度确定

    父元素高度确定的多行文本、图片、块状元素的垂直居中的方法有两种:

    方法一:将内容写入table(包括tbody、tr、td)中的td标签里,同时设置 vertical-align:middle。

    css中属性 vertical-align只有在父元素为 td 或 th 时,才会生效。例如:

    <body>
    <table><tbody><tr><td class="box">
    <div>
        <p>我是垂直居中的</p>
        <p>我是垂直居中的</p>
        <p>我是垂直居中的</p>
        <p>我是垂直居中的</p>
        <p>我是垂直居中的</p>
    </div>
    </td></tr></tbody></table>
    </body>

    css:

    table td{height:300px;background:#000}

    方法二:

    html代码:

    给父容器添加display:table-cell和vertical-align:middle;

    <div class="div1">
        <div>
            <p>看我是否可以居中。</p>
            <p>看我是否可以居中。</p>
            <p>看我是否可以居中。</p>
            <p>看我是否可以居中。</p>
            <p>看我是否可以居中。</p>
        </div>
    </div>

    css代码:

    <style>
    .div{
        height:400px;
        background:#eee;
        display:table-cell;
        vertical-align:middle;
    }
    </style>
    

      

  • 相关阅读:
    Android——活动的基本用法
    开课第五周周总结
    java常用框架
    javaweb学习
    每日日报2021.3.23
    每日日报2021.3.22
    每日日报2021.3.21
    每日日报2021.3.19
    每日日报2021.3.18
    每日日报2021.3.17
  • 原文地址:https://www.cnblogs.com/suxh/p/4595433.html
Copyright © 2011-2022 走看看