1.   <div>
                  <img src="//s.weituibao.com/1582958061265/mlogo.png" alt="logo">
                  <span>vue3 admin</span>
                </div>
    2. display: flex;　　// 对div内元素 横向排列
    3. align-items: center;　// div内元素纵向居中
    4. justify-content: center;　　// div内元素横向居中

div里元素横向排列 居中对齐的更多相关文章

  1. css3实现左右div高度自适应且内容居中对齐

    主要运用了css3的弹层布局,直接上代码: 效果:左边盒子宽度固定.内容居中对齐.与右侧盒子高度相等,右侧自动缩放 html: <div class="main"> & ...

  2. 如何使ul中li元素横向排列且不换行

    外层div容器宽度固定,ul宽度随li(li宽度固定)的增加而撑开,但是当ul中li的宽度之和大于div时,ul没有撑开,而是li换行了,如何使li不换行? 解决方法:主要是外面容器设置为white- ...

  3. ul中li元素横向排列且不换行

    ul { white-space: nowrap; } li { display: inline-block; }     white-space 属性设置如何处理元素内的空白. normal 默认. ...

  4. 一个宽度不确定的DIV里放三个水平对齐的DIV，左右两个DIV宽度固定为100px，中间那个DIV自适应宽度

    方法一:浮动  注意三个div的位置 <html><head> <meta charset="utf-8"> <style type=&q ...

  5. 两个div横向排列，顶端对齐的方式。

    1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!DOCTYPE html PUBLIC "-//W3C/ ...

  6. 让几个横向排列的浮动子div居中显示的方法

    div设置成float之后,就无法使子div居中显示了,那么如何让几个横向排列的浮动的div居中显示呢,下面有个不错的方法,希望对大家有所帮助 div设置成float之后,在父div中设置text-a ...

  7. 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

    最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...

  8. 如何定义让两个div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  9. 如何让div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  10. HTML4如何让一个DIV居中对齐？float输入日志标题

    float:left,right clear:both 如何让一个DIV居中对齐? 第一步:设置外层的DIV的text-align:center; 第二步:设置里层的DIV的margin:auto 以 ...

随机推荐

  1. 将IoTdb注册为Windows服务

    昨天写的文章<Windows Server上部署IoTdb 集群>,Windows下的InfluxDB是控制台程序,打开窗口后,很容易被别人给关掉,因此考虑做成Windows服务,nssm ...

  2. DVWA靶场实战(十)——XSS(DOM)

    DVWA靶场实战(十) 五.XSS(DOM): 1．漏洞原理: XSS全称为Cross Site Scripting,由于和层叠样式表(Cascading Style Sheets,CSS)重名,所以 ...

  3. vue element admin 关闭eslint校验

    vue.config.js里面进行设置 lintOnSave: false, // lintOnSave: process.env.NODE_ENV === 'development',

  4. 穿透的switch语句-循环概述与基本组成部分

    穿透的switch语句 在switch语句中,如果case的后面不写break,将出现穿透现象,也就是不会在判断下一个case的值,直接向后运 行,直到遇到break,或者整体switch结束. pu ...

  5. 【Oculus Interaction SDK】（一）设置 VR 相机与控制器 && 实现简单的抓取功能

    前言 前段时间 Oculus 的 SDK 频繁更新,很多已有的教程都不再适用于现在的版本了.本系列文章的主要目的是记录现版本常见功能的实现方法,便于自己后续开发.当然,不排除我文章刚写完 SDK 又变 ...

  6. 11月25日内容总结——sql查询关键字

    目录 一.SQL语句查询关键字 二.前期数据准备 三.编写SQL语句的小技巧 四.查询关键字之where筛选 1.查询id大于等于3小于等于6的数据 2.查询薪资是20000或者18000或者1700 ...

  7. pdf转图片加水印压缩

    ''' pip install pymupdf pip install pillow ''' import os import uuid import fitz from PIL import Ima ...

  8. 关于xlrd最新版本不支持.xlsx文件的解决办法

    #卸载已安装的 pip uninstall xlrd #下载对应的版本 pip install xlrd==1.2.0 #卸载已安装的pip uninstall xlrd #下载对应的版本pip in ...

  9. prometheus+grafana监控体验

    先上pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  10. 【一句话】@Configuration和@Component的区别

    首先一句话: @Configuration修饰的类会被Cglib动态代理,@Component不会. 详细: Cglib动态代理生成当前对象的子类Class,并对方法拦截,多次调用@Bean方法时直接 ...