zoukankan      html  css  js  c++  java
  • pc端常见布局---水平居中布局 单元素不定宽度

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>常见元素布局</title>
            <style type="text/css">
                /* 一、水平居中布局 */
                /* 1.单个元素水平居中 宽度不固定 缺点:需要涉及到父类的样式*/
                .content {
                    text-align: center;
                }
    
                .box {
                    display: inline-block;
                    color: #fff;
                    background: #0000FF; 
                }
            </style>
        </head>
        <body>
            <div class="content">
                <div class="box">
                宽度不固定
                </div>
            </div>
        </body>
    </html>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>常见元素布局</title>
            <style type="text/css">
                /* 一、水平居中布局 */
                /* 2.单个元素水平居中 宽度不固定 缺点:设置为表格元素,内部元素的布局有可能受到影响*/
                .box {
                    display: table;
                    margin: 0 auto;
                    background: #ff9933;
                    color: #fff; /* background和color测试更好的观看效果 */
                }
            </style>
        </head>
        <body>
            <div class="content">
                <div class="box">
                    宽度不固定
                </div>
            </div>
        </body>
    </html>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>常见元素布局</title>
            <style type="text/css">
                /* 一、水平居中布局 */
                /* 3.单个元素水平居中 宽度不固定 缺点:transform,兼容性较差*/
                .content {
                    position: relative;
                }
    
                .box {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    background: #ff9933;
                    color: #fff; /* background和color测试更好的观看效果 */
                }
            </style>
        </head>
        <body>
            <div class="content">
                <div class="box">
                    宽度不固定
                </div>
            </div>
        </body>
    </html>

    效果:

  • 相关阅读:
    Django 框架 # 51
    Django 框架 介绍# 51
    前端之Bootstrap框架 # 50
    phpcms调用一个指定的栏目的url和栏目名称
    phpcms导航栏调用二级栏目
    彻底弄懂JS的事件冒泡和事件捕获
    toggle 方法的使用
    关于内层DIV设置margin-top不起作用的解决方案
    phpmyadmin导入数据库大小限制修改
    phpcms v9 的表单向导功能的使用方法
  • 原文地址:https://www.cnblogs.com/lhl66/p/10374403.html
Copyright © 2011-2022 走看看