布局
何如让一个标签上下左右都居中?这有什么难的,给定子标签的宽,再让它的边距上下为0,左右为auto;如下:

.child{width:10px;margin:0 auto;}//子标签

它就可以左右居中了。上下的话,就是让父标签展现成表格,子标签展现成单元格并把vertical-align属性设置成middle就可以了;

.father{display:table}
.child{display:table-cell;vertical-align: middle;}

它就可以了上下也居了。
但是...这种技术太老了!而且只适合pc端,移动端的不适合用这套...
其实移动端的不难,用flex布局。这布局也不难,不是特别高端的技术,所以应该把它学起来!不说了直接上代码。

.father{background-color: red;width: 120px;height: 110px;display: flex;justify-content:center;align-items:center;}
.child{background-color: blue;width: 20px;height: 10px;}

上面也是可以实现上下左右居中,而且flex布局不仅仅这有这样,它相当牛!
上面的核心代码:
display: flex;//标签展现成flex
justify-content:center;//让子标签水居中
align-items:center;//让子标签垂直居中

那是我在夕阳下的code的更多相关文章

  1. .NET跨平台之mac 下vs code 多层架构编程

    合肥程序员群:49313181.    合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入,申请备注填写姓名+技术+工作年限) Q  Q:408365330     E-Mail:eg ...

  2. IntelliJ下使用Code/Live Template加快编码速度:程序员的工作不是写程序,而是写程序解决问题

    程序员的工作不是写程序,而是写程序解决问题. --- 某不知名程序员 我们每天都在写代码,有些代码有结构性的相似,但不是所有的代码都可以被抽成方法.在这种情况下,我们应该考虑使用template的方式 ...

  3. 在Ubuntu Linux下安装Code::Blocks和Eclipse CDT

           最近小白由于有工作学习的需要,要尝试在Linux下进行C++编程.所以特地花了一点时间研究一下Linux下的C++的IDE.最后我尝试了使用Code::Blocks和Eclipse两个著 ...

  4. EF 下的code fist 模式编程

    EF 分两种模式 codefirst(就是不知道数据是啥,也没有数据库)  和 database fist (数据已经设计好了) 首先打开vs  新建一个项目 创建一个控制台程序 然后 新建一个Tea ...

  5. mac os 下 vs code 开发 .net core

    1.软件下载 .net core 2.0 sdk: vs code 最新版: 2.用 dotnet 命令行 dotnet cli 创建项目 打开终端,创建这次项目的文件夹,mkdir Demo1: c ...

  6. ubuntu下VS code如何调试C++代码

    最近开始使用Vs codel,真的方便,可以和git结合.下面总结一下如何调试程序, 我写了一个实例程序(不重要) #include <iostream> #include <fst ...

  7. Ubuntu下VS Code 字体设置 + 标签匹配、括号匹配插件

    Ubuntu下比较好看的字体有: Courier NewSource Code ProWenQuanYi Micro HeiWenQuanYi Micro Hei MonoUbuntuDroid Sa ...

  8. ubuntu下使用code::blocks编译运行一个简单的gtk+2.0项目

    在具体的操作之前,首先需要安装一些必要的软件.ubuntu下默认安装了gcc,不过缺少必要的Header file,可以在命令行中输入下面的指令安装build-essential套件:sudo apt ...

  9. Win10+WSL2+Ubuntu 18.04(WSL下)+VS Code(Win10下)+TexLive 2019(Ubuntu下)安装和配置

    本人手头电脑是Win10 Home版全新安装的系统,由于不想在新系统盘里面安装TexLive导致固态硬盘不断扩大,所以,考虑安装Ubuntu做为WSL,然后把TexLive安装在Ubuntu,并通过V ...

随机推荐

  1. selenium+python自动化106 - 滑动 iframe 上的滚动条

    前言 页面嵌套了iframe,这个iframe又是可以滚动的,如何操作iframe上的滚动条? 示例 写一个html页面案例,源码如下 <!DOCTYPE html> <html l ...

  2. redis主从复制,哨兵以及集群搭建部署

    redis主从复制 1.redis支持多实例的功能,一台机器上,可以运行多个单个的redis数据库 环境准备,运行3个redis数据库,达到 1主 2从的配置 主库 6379.conf port 63 ...

  3. webpack--性能优化之打包构建速度和代码调试优化

    前言 本文来总结写webpack 在性能方面常见的优化方案. 正文 本文分别总结开发环境和生产环境中在打包构建速度和代码调试功能方面的优化方案,如下: 1.开发环境性能优化 (1)优化打包构建速度 a ...

  4. 30道关于linux的基础命令小题,先练练手

    1.修改主机名为yuanlai0224命令是: 2.切换⽬录到/yuchao01/data/,再创建脚本/my_website/scripts/start.sh. 绝对路径.相对路径两种写法 3.查看 ...

  5. CentOS8时间同步

    CentOS8中默认已经不再支持ntpd软件包,同时也无法通过官方软件仓库安装, CentOS8上使用Chrony配置NTP服务器,用于同步时间. 它有两个程序,chrony和chronyd, chr ...

  6. 关于SQL Server 各种安装失败均失败,报错“等待数据库引擎恢复句柄失败”的经验分享

    最近安装SQL 2019遇到这个问题,试过自己合网上几乎所有办法,怎么都安装不上,最后在微软社区解决了,由于这个问题比较特殊,并且网上几乎没有正确的决绝方案,因此将我的解决过程及经验记录分享一下,也为 ...

  7. CF708C题解

    挺简单的一道数据结构... 首先考虑这个"改造"的本质,很明显是把一颗子树塞到了另一个节点下面. 考虑一个节点可能成为重心的条件.条件很明显是只有一颗子树的大小大于 \(\frac ...

  8. min_25 筛学习小记

    min_25筛 由 dalao min_25 发明的筛子,据说时间复杂度是极其优秀的 \(O(\frac {n^{\frac 3 4}} {\log n})\),常数还小. 1. 质数 \(k\) 次 ...

  9. CF1117G题解

    题意:区间建笛卡尔树,求每个节点的siz之和. 首先看到笛卡尔树,就应该想到,因为这是一个排列,可以找到通过左边和右边第一个比自己大的元素来"建立"笛卡尔树. 设 \(l(u)\) ...

  10. 使用socat反向Shell多台机器

    原创:打码日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 场景 很多时候,我们需要批量操作多台机器,业界一般使用Ansible来实现,但使用Ansible来操作多台机器的前提是需 ...