首页 > 其他分享 >居中布局

居中布局

时间:2023-07-27 17:00:53浏览次数:55  
标签:居中 vertical color align 布局 height middle 400px

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试样例</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: gray;
            text-align: center;
            line-height: 400px;
            font-size: 0px;
            /* vertical-align: middle; */
            
        }
        img {
            vertical-align:middle;
        }

        span{
            vertical-align: middle;
            font-size: 40px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span>出来玩呀?</span>
        <img src="../images/悟空.jpg">
    </div>
</body>
</html>

 

标签:居中,vertical,color,align,布局,height,middle,400px
From: https://www.cnblogs.com/y593216/p/17585418.html

相关文章

  • 如何使一个盒子水平垂直居中?
    1.利用定位(常用)<body><divclass="father"><divclass="son">我是子元素</div></div></body><style>.father{width:500px;height:500px;border:1pxsolidred;position:relative;......
  • std::optional 内存布局
    对于std::optional<int>对应的内存布局为structoptional_mem{ int_M_payload; bool_M_engaged;};可以通过godbolt通过pahole工具查看在汇编窗口选择pahole右侧会显示数据结构classexception_ptr{ void*_M_exception_object;/*0......
  • css值grid布局基础
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>Document</title&g......
  • flex 布局详解
    一、flex简单介绍Flex全称Flexiblebox布局模型,通常称为flexbox或flex,也称为弹性盒子或弹性布局。一种比较高效率的css3布局方案。既然是盒子,首先需要一个容器container,然后是项目item。容器包裹着项目,再通过配置不同的属性,实现各种各样的排列分布。flex有两根轴线,分别......
  • Android开发笔记[2]-传统XML方式界面布局
    摘要使用传统的XML方式对Androidapp界面进行布局.平台信息AndroidStudio:ElectricEel|2022.1.1Patch2Gradle:distributionUrl=https://services.gradle.org/distributions/gradle-7.5-bin.zipjvmTarget='1.8'minSdk24targetSdk34compileSdk34开发语言:Kotl......
  • c++打印类的内存布局
    内存布局默认32位编译下,4字节对齐有虚函数情况下会在内存一开始多一个虚表指针普通函数不占内存空间静态成员不占内存空间1.通过cl命令输出hello.cpp中的类A的内存布局测试#输出指定类型的内存布局clhello.cpp/d1reportSingleClassLayoutA#输出所有类型的内存布局......
  • JeecgBoot轻松解决ERP项目复杂布局需求,JVXETable高性能表格效果和项目案例
    ERP项目表格布局一般都很复杂,要求大数据、高性能操作,这个用JeecgBoot如何解决呢?下边是我们之前服务过的一个应用行编辑的ERP项目,以强大的行编辑功能,让客户很满意,下面我们来看一下这个项目:1.客户需求每行数据可以实时编辑、自动保存,其他用户数据实时刷新并且有日历翻牌效果......
  • IFC中行内盒的真实布局
    根据9.4.2IFC小节中的高亮文字可以看出,IFC中是这样布局行内盒的:IFC首先创建一个行框,将行内盒一个一个水平地排列。一个行框用完了,就创建一个新的行框接着放。如果一个行内盒在当前行框的剩余部分放不下,则会创建一个新的行内盒装下剩余的部分,放到下一个行框。被分割的行内盒在分割......
  • Unity UGUI的LayoutElement(布局元素)组件的介绍及使用
    UnityUGUI的LayoutElement(布局元素)组件的介绍及使用1.什么是LayoutElement组件?LayoutElement是UnityUGUI中的一个布局元素组件,用于控制UI元素在布局中的大小和位置。它可以用于自动调整UI元素的大小,以适应不同的屏幕分辨率和布局需求。2.LayoutElement组件的工作原理Layou......
  • 响应式布局
    响应式网站 同一个网站可以同时适配多个终端 两个网站应该pc端 一个移动端   复杂的网站(电商   两个终端) 简单的网站(企业网站 后台管理系统) 实现核心:媒体查询 响应式实现的方式 1.设置meta 默认情况下html的最小宽度是980px  <meta n......