布局
何如让一个标签上下左右都居中?这有什么难的,给定子标签的宽,再让它的边距上下为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. IntelliJ:自动生成JavaBean的读写方法

    1.定义好一个class,其中写好private属性. 2.右键点击该class,在generate中选择自动根据模板生成的读写方法.

  2. MySQL第五讲

    内容回顾 单表操作 """ 1.配置文件先统一设置成utf8 \s 2.无论你怎么改都没有生效 你的机器上不止一个mysql文件 C有一个 D有一个 3.百度搜索 sho ...

  3. 在 k8s 以外的分布式环境中使用 Dapr

    在Dapr 文档和实践案例中多是推荐采用k8s, 其实我目前也是在k8s 上操作的,有公有云TKE,AKS,还有私有云的Rancher ,它并没有传闻中的那么难,而且我认为它非常容易上手.不过,我还是 ...

  4. phpStudy windows服务器下安装,以及外网不能访问的问题

    废话不多说,超简单 1.下载phpstudy软件包http://phpstudy.php.cn/官网进行下载 2.安装,下一步式傻瓜安装 3.配置域名: 打开hosts文件,添加 然后然后访问域名就可 ...

  5. Spark ML源码分析之三 分类器

            前面跟大家扯了这么多废话,终于到具体的机器学习模型了.大部分机器学习的教程,总要从监督学习开始讲起,而监督学习的众多算法当中,又以分类算法最为基础,原因在于分类问题非常的单纯直接,几乎 ...

  6. CentOS7.5环境下Docker环境搭建

    1. 安装wget工具: yum install wget -y 2. 使用wget工具从docker官网下载yum源: wget -P /etc/yum.repos.d/ https://downl ...

  7. Golang 常见设计模式之装饰模式

    想必只要是熟悉 Python 的同学对装饰模式一定不会陌生,这类 Python 从语法上原生支持的装饰器,大大提高了装饰模式在 Python 中的应用.尽管 Go 语言中装饰模式没有 Python 中 ...

  8. 阿里云开源镜像站支持IPv6访问

    阿里云开源镜像站在国内企业镜像站中率先支持IPv6访问! 点击立即试用https://developer.aliyun.com/mirror/ 同时基于阿里云OpenSearch的搜索能力,开源镜像站 ...

  9. 面试官:Zookeeper是什么,它有什么特性与使用场景?

    哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 作为一名Java程序员,Zook ...

  10. 羽夏看Win系统内核——结语

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...