zoukankan      html  css  js  c++  java
  • 无高度内容垂直居中

    <!DOCTYPE html>
    <html>
    <body>
        <style>
            .title {
                font-size: 18px;
            }
            .container {
                background-color: lightblue;
                 300px;
                height: 300px;
            }
            .content {
                font-size: 16px;
                font-weight: 600;
            }
        </style>
    
        <h1 class="title">table</h1>
        <section class="container" style="display:table-cell; vertical-align: middle;">
            <div class="content">这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。</div>
        </section>
    
        <h1 class="title">grid</h1>
        <section class="container" style="display:grid; align-items: center;">
            <div class="content">这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。</div>
        </section>
    
        <h1 class="title">transform</h1>
        <section class="container" style="position: relative;">
            <div class="content" style="position: absolute; top: 50%; transform: translateY(-50%);">这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。</div>
        </section>
    
        <h1 class="title">flex</h1>
        <section class="container" style="display: flex; align-items: center;">
            <div class="content">这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。这里是一段高度未知的文本。</div>
        </section>
    </body>
    </html>
    
  • 相关阅读:
    1. flask框架-简介/快速启动
    conda创建、查看、删除虚拟环境
    DOM用法(二)
    DOM用法(一)
    BOM用法
    Javascript对象
    JavaScript基础篇
    mysql 外连接
    mysql 连接表 内连接 inner
    mysql分组函数
  • 原文地址:https://www.cnblogs.com/ljwk/p/11913616.html
Copyright © 2011-2022 走看看