布局
何如让一个标签上下左右都居中?这有什么难的,给定子标签的宽,再让它的边距上下为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. 爬虫之爬取B站视频及破解知乎登录方法(进阶)

    今日内容概要 爬虫思路之破解知乎登录 爬虫思路之破解红薯网小说 爬取b站视频 Xpath选择器 MongoDB数据库 爬取b站视频 """ 爬取大的视频网站资源的时候,一 ...

  2. anaconda及jupyter notebook的使用之numpy模块的用法(2)

    今日内容概要 numpy模块结束 ndarray创建 numpy内置方法 索引与切片(花式索引.布尔索引) 常用函数 统计方法 随机数 numpy的内置方法 import numpy as np 1. ...

  3. IntelliJ IDEA 中打包时报aspose-cells错误缺失

    异常情况 在本地执行word转换为pdf是没有问题,但是在maven中提示错误: 解决方案 将com\aspose\aspose-cells\9.0.0下除了[aspose-cells-9.0.0.j ...

  4. CS61b proj1a

    得分46.25有一个点的bug不会修(希望大佬带我),style没有注意.1.LinkedListDeque.java public class LinkedListDeque <T>{ ...

  5. Django基础三之路由、视图、模板

    Django基础三之路由.视图.模板 目录 Django基础三之路由.视图.模板 1. Django 请求和返回周期 1.1 路由层之路由匹配 1.2 有名分组 1.3 无名分组 2. 反射解析 3. ...

  6. Spring IOC---Bug处理

    1. org.junit.platform.commons.JUnitException: TestEngine with ID 'junit jupiter' failed to discover ...

  7. 程序语言与编程实践4-> 蓝桥杯C/C++备赛记录2 | 第二周学习训练

    0323,又是一周星期三,按道理该总结了.这周前几天写题比较多,后面事情多了起来,就没怎么写了.主要方向是洛谷的基本语法熟悉,PTA平台数据结构的一些题目. 0323附上: 题目比较多,所以文章可能有 ...

  8. FrameScan CMS漏洞扫描

    工具简介 GithubL:https://github.com/qianxiao996/FrameScan FrameScan是一款python3编写的简易的cms漏洞检测框架,支持多种检测方式,支持 ...

  9. vue2.x版本中computed和watch的使用入门详解-关联和区别

    前面两篇介绍了computed和watch的基本使用 watch篇 computed篇 两者的区别,继续通过代码实现的方式具体去了解 html <li>最开始的value值:{{ name ...

  10. Java代码块与构造器方法执行顺序

    直接上源码: public class Demo4 { { //这里是代码块 System.out.println("这里是代码块"); } static { //这里是静态代码块 ...