程序员经验分享-hwhale

HTML5中常用的标签居中方式

2023-05-16 
/*#father{
                width: 300px;
                height: 300px;
                background: #ccc;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            #child{
                display: inline-block;
                width: 50px;
                height: 50px;
                background: red;
            }*/


            /*#father{
                width: 300px;
                height: 300px;
                background: #ccc;
                display: flex;
                justify-content: center;
                align-items: center;
                -webkit-align-content: center;
                -webkit-align-items: center;
            }
            #child{
                width: 50px;
                height: 50px;
                background: red;
            }*/


            /*#father{
                position: relative;
                width: 300px;
                height: 300px;
                background: #ccc;
            }*/
            /*#child{
                position: absolute;
                width: 50px;
                height: 50px;
                background: red;
                left: 50%;
                top: 50%;
                -webkit-transform: translateY(-50%) translateX(-50%);
                -moz-transform: translateY(-50%) translateX(-50%);
                -o-transform: translateY(-50%) translateX(-50%);
                -ms-transform: translateY(-50%) translateX(-50%);
            }*/


            /*#father{
                position: relative;
                width: 300px;
                height: 300px;
                background: #ccc;
            }
            #child{
                position: absolute;
                width: 50px;
                height: 50px;
                background: red;
                left: 50%;
                top: 50%;
                margin-left: -25px;
                margin-top: -25px;
            }*/



            /*#father{
                position: relative;
                width: 300px;
                height: 300px;
                background: #ccc;
            }
            #child{
                position: absolute;
                width: 50px;
                height: 50px;
                background: red;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }*/

//利用盒模型
.father{
            width: 100%;
            height: 200px;
            background: red;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

}
space-between设置的是子控件左中右分布，center可以设置子空间居中显示

以上是标签居中的几种常用方式，还会完善。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html5

中常用的标签居中方式

HTML5中常用的标签居中方式 的相关文章

随机推荐

  • yarn结构-2.9.0

    YARN最基本的想法就是把资源管理和任务调度 监听功能分成独立的守护进程 这个想法就是有一个全局的ResourceManager xff08 RM xff09 和每个应用独自的ApplicationMaster xff08 AM xff09

  • spark集群模式概览

    本文简短概述下spark如何在集群上运行 xff0c 使得更简单地理解涉及到的组件 可以通过读 应用提交指南 来学习在一个集群上加载应用 组件 spark应用作为独立的进程集运行在集群上 xff0c 在主应用 xff08 称为驱动程序 xf

  • SPARK RDD编程指南

    在高层次面上 xff0c 每个spark应用有一个驱动程序组成 xff0c 驱动程序运行用户的主函数 xff0c 在集群上执行很多并行操作 Spark提供的主要抽象是RDD xff0c 可以进行并行操作的跨节点分散的元素集 RDDs可以由H

  • Spark SQL,DataFrames and Datasets Guide

    概览 Spark SQL是Spark的一个结构化数据处理模块 不像基本的Spark RDD API xff0c Spark SQL提供的接口提供更多关于数据和执行的操作的结构信息 从内部看 xff0c Spark SQL使用额外的信息来执行

  • Structured Streaming Programming Guide-2.3.0

    概览 结构化流是一个可伸缩和容错的流处理引擎 xff0c 内置在Spark SQL 引擎中 你可以以对静态数据表达批处理计算的方式表达你的流计算 Spark SQL引擎会注意逐渐 持续第运行 xff0c 并随着流数据不断到来而更新最终的结果

  • 数据结构abc

    数据结构是指数据组织 xff08 逻辑 物理 xff09 的方式 xff0c 相应的操作 xff08 比如新增 查询 删除 修改 xff09 规则称为算法 xff0c 数据结构和算法构成数据管理方案 数据结构和算法相互影响 xff0c 同时

  • python之web.py

    安装 安装web py 请先下载 xff1a http webpy org static web py 0 37 tar gz 或者获取最新的开发版 xff1a https github com webpy webpy tarball ma

  • try-catch 报错

    try catch的意义 xff1a 1 报错处理 xff0c 输出日志 2 不影响代码块之外的代码执行 xff0c 即发生发生错误后之后的代码仍然后继续执行 try catch代码块与 throws Exception方法块区别 1 tr

  • DSP RTB SSP

    作者 xff1a 炸乌鸦面 链接 xff1a https www zhihu com question 23458646 answer 130631448 来源 xff1a 知乎 著作权归作者所有 商业转载请联系作者获得授权 xff0c 非

  • eclipse常见问题

    1 设置js文件编辑器编码 2 设置项目部署位置 xff0c 是Tomcat安装目录还是workspace位置 3 设置Java源文件编译后class文件输出位置 4 Java类文件等修改后没有重新编译 如果还不行 xff0c 就将JRE库

  • Windows系统和Linux系统服务器该如何远程连接

    程序架设离不开服务器 xff0c 而服务器跟我们家用电脑类似 xff0c 也都有操作系统 xff0c 目前市场广泛使用的服务器操作系统有Windows系统和Linux系统 那么我们改如果远程连接上去操作嗯 xff0c 接下来就给大家分享下常

  • HTML5集锦

    1 js获取当前域名 Url 相对路径和参数以及指定参数 https www cnblogs com wangdahai p 6221399 html 2

  • web on servlet stack-5.0.4

    翻译自https docs spring io spring docs 5 0 4 RELEASE spring framework reference web html 这部分文档涵盖Servlet Stack的支持 基于Servlet

  • flume1.8.0用户指南

    以下内容翻译自http flume apache org FlumeUserGuide html 一 引入 1 概览 Apache Flume是一个分布式 可靠的 可用的系统 xff0c 高效地从不同的源收集 聚集和移动大量的日志数据到一个

  • easyui框架combotree和combobox多选模式取值样例

    combotree html lt div class 61 34 conditions staff ue clear 34 br style 61 34 overflow visible float left line height 30

  • SVM-support vector machine

    classification Algorithms SVM nearest neighbors random forest regression Algorithms SVR ridge regression Lasso cluster A

  • cmd端口进程管理

    根据端口号查找进程 gt netstat aon findstr 8080 TCP 0 0 0 0 8080 0 0 0 0 0 LISTENING 10064 TCP 8080 0 LISTENING 10064 根据进程好查找进程 gt

  • javaweb相对路径和绝对路径

    绝对路径 xff1a 相对磁盘位置 示例 xff1a E workspace git metadata plugins org eclipse wst server core tmp2 wtpwebapps project app uplo

  • ActiveMQ 使用Ajax 收发消息实战

    原理简析 ActiveMQ 在版本发布包中包含了web sample的demo 其中就包含js与ActiveMQ交互的库文件amq js 以5 8 0版本为例 该文件目录为 apache activemq 5 8 0 webapps dem

  • HTML5中常用的标签居中方式

    span class hljs comment father width 300px height 300px background ccc display table cell vertical align middle text ali

热门标签