zoukankan      html  css  js  c++  java
  • 使用inline-block做水平垂直居中

    父级宽高不定,如何使子元素水平垂直居中?

    下面是用 display: inline-block 实现的:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>垂直自适应</title>
        <style>
        * {
            margin: 0; padding: 0;
        }
        .box {
            position: relative;
             400px; height: 600px;
            margin: 100px auto;
            border: 1px solid #666;
            text-align: center;
        }
        .content {
             100px; height: 100px;
            display: inline-block;
            vertical-align: middle;
            background: red;
        }
        .middle-span {
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="content"></div>
            <span class="middle-span"></span>
        </div>
    </body>
    </html>

    子级 display: inline-block; ,父级 text-align: center; ,实现水平居中。

    子级 vertical-align: middle; ,且span height: 100%; ,实现垂直居中。

  • 相关阅读:
    repair table
    利用逻辑备份恢复部分库表
    Web框架理解
    BootStrape基础使用
    jQuery入门
    BOM操作
    DOM操作
    day12 css样式
    JavaScript基础
    day11 前端知识简单总结
  • 原文地址:https://www.cnblogs.com/ccforeverd/p/3903602.html
Copyright © 2011-2022 走看看