那是我在夕阳下的code
布局
何如让一个标签上下左右都居中?这有什么难的,给定子标签的宽,再让它的边距上下为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的更多相关文章
- .NET跨平台之mac 下vs code 多层架构编程
合肥程序员群:49313181. 合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入,申请备注填写姓名+技术+工作年限) Q Q:408365330 E-Mail:eg ...
- IntelliJ下使用Code/Live Template加快编码速度:程序员的工作不是写程序,而是写程序解决问题
程序员的工作不是写程序,而是写程序解决问题. --- 某不知名程序员 我们每天都在写代码,有些代码有结构性的相似,但不是所有的代码都可以被抽成方法.在这种情况下,我们应该考虑使用template的方式 ...
- 在Ubuntu Linux下安装Code::Blocks和Eclipse CDT
最近小白由于有工作学习的需要,要尝试在Linux下进行C++编程.所以特地花了一点时间研究一下Linux下的C++的IDE.最后我尝试了使用Code::Blocks和Eclipse两个著 ...
- EF 下的code fist 模式编程
EF 分两种模式 codefirst(就是不知道数据是啥,也没有数据库) 和 database fist (数据已经设计好了) 首先打开vs 新建一个项目 创建一个控制台程序 然后 新建一个Tea ...
- mac os 下 vs code 开发 .net core
1.软件下载 .net core 2.0 sdk: vs code 最新版: 2.用 dotnet 命令行 dotnet cli 创建项目 打开终端,创建这次项目的文件夹,mkdir Demo1: c ...
- ubuntu下VS code如何调试C++代码
最近开始使用Vs codel,真的方便,可以和git结合.下面总结一下如何调试程序, 我写了一个实例程序(不重要) #include <iostream> #include <fst ...
- Ubuntu下VS Code 字体设置 + 标签匹配、括号匹配插件
Ubuntu下比较好看的字体有: Courier NewSource Code ProWenQuanYi Micro HeiWenQuanYi Micro Hei MonoUbuntuDroid Sa ...
- ubuntu下使用code::blocks编译运行一个简单的gtk+2.0项目
在具体的操作之前,首先需要安装一些必要的软件.ubuntu下默认安装了gcc,不过缺少必要的Header file,可以在命令行中输入下面的指令安装build-essential套件:sudo apt ...
- Win10+WSL2+Ubuntu 18.04(WSL下)+VS Code(Win10下)+TexLive 2019(Ubuntu下)安装和配置
本人手头电脑是Win10 Home版全新安装的系统,由于不想在新系统盘里面安装TexLive导致固态硬盘不断扩大,所以,考虑安装Ubuntu做为WSL,然后把TexLive安装在Ubuntu,并通过V ...
随机推荐
- 爬虫之爬取B站视频及破解知乎登录方法(进阶)
今日内容概要 爬虫思路之破解知乎登录 爬虫思路之破解红薯网小说 爬取b站视频 Xpath选择器 MongoDB数据库 爬取b站视频 """ 爬取大的视频网站资源的时候,一 ...
- anaconda及jupyter notebook的使用之numpy模块的用法(2)
今日内容概要 numpy模块结束 ndarray创建 numpy内置方法 索引与切片(花式索引.布尔索引) 常用函数 统计方法 随机数 numpy的内置方法 import numpy as np 1. ...
- IntelliJ IDEA 中打包时报aspose-cells错误缺失
异常情况 在本地执行word转换为pdf是没有问题,但是在maven中提示错误: 解决方案 将com\aspose\aspose-cells\9.0.0下除了[aspose-cells-9.0.0.j ...
- CS61b proj1a
得分46.25有一个点的bug不会修(希望大佬带我),style没有注意.1.LinkedListDeque.java public class LinkedListDeque <T>{ ...
- Django基础三之路由、视图、模板
Django基础三之路由.视图.模板 目录 Django基础三之路由.视图.模板 1. Django 请求和返回周期 1.1 路由层之路由匹配 1.2 有名分组 1.3 无名分组 2. 反射解析 3. ...
- Spring IOC---Bug处理
1. org.junit.platform.commons.JUnitException: TestEngine with ID 'junit jupiter' failed to discover ...
- 程序语言与编程实践4-> 蓝桥杯C/C++备赛记录2 | 第二周学习训练
0323,又是一周星期三,按道理该总结了.这周前几天写题比较多,后面事情多了起来,就没怎么写了.主要方向是洛谷的基本语法熟悉,PTA平台数据结构的一些题目. 0323附上: 题目比较多,所以文章可能有 ...
- FrameScan CMS漏洞扫描
工具简介 GithubL:https://github.com/qianxiao996/FrameScan FrameScan是一款python3编写的简易的cms漏洞检测框架,支持多种检测方式,支持 ...
- vue2.x版本中computed和watch的使用入门详解-关联和区别
前面两篇介绍了computed和watch的基本使用 watch篇 computed篇 两者的区别,继续通过代码实现的方式具体去了解 html <li>最开始的value值:{{ name ...
- Java代码块与构造器方法执行顺序
直接上源码: public class Demo4 { { //这里是代码块 System.out.println("这里是代码块"); } static { //这里是静态代码块 ...