那是我在夕阳下的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 ...
随机推荐
- 量化研究之“大A打板敢死队”是如何做换手板与撬板的?
更多精彩内容,欢迎关注公众号:数量技术宅,也可添加技术宅个人微信号:sljsz01,与我交流. 涨停跌停板分类 涨停.跌停是A股特有的现象,其他主要市场,例如美股.港股都不存在涨跌停的规则.涨停.跌停 ...
- Qt:QDateTime、QDate、QTime与QDateTimeEdit
时间日期是经常遇到的数据类型,Qt中的时间日期类如下: QTime:时间类型,只表示时间,如15:23:13: QDate:日期类型,只表示日期,如2017-4-5: QDateTime:日期时间类型 ...
- Python:lxml
学习自: python3解析库lxml - Py.qi - 博客园 lxml官方文档 lxml官方文档--lxml中的类.方法使用,如果需要查看某些方法的具体用法,就到这个网页下 python爬虫系列 ...
- (六)目标检测算法之YOLO
系列文章链接: (一)目标检测概述 https://www.cnblogs.com/kongweisi/p/10894415.html (二)目标检测算法之R-CNN https://www.cnbl ...
- k8s集群StatefulSets的Pod调度查询丢失问题?
k8s集群StatefulSets的Pod调度查询丢失问题? 考点之简单介绍下StatefulSets 和 Deployment 之间有什么本质区别?特定场景该如何做出选择呢? 考点之你能辩证的说说看 ...
- Spring Cloud Alibaba 2021.0.1.0 发布:版本号再也不迷糊了
大家好,DD又来了! 3月9日,Spring官方博客发文:Spring Cloud Alibaba 2021.0.1.0发布了. 前段时间DD还在微信群里看到小伙伴吐槽Spring Cloud Ali ...
- 二级python考试大纲以及考试指导复习方案
二级python考试大纲与复习指导 本人也是在备考二级py 可能理解不对的地方请指正 参考网络,侵权删除 考纲解读→ 一.考试介绍 1.1考试人群 全国计算机等级考试(python语言程序设计(二 ...
- Laravel-AJAX-分页
public function show(Request $request){ $posts = DB::table('posts') ->join('cate','posts.cate_id' ...
- MySQL 8.0安装以及初始化错误解决方法
MySQL 8.0 安装配置及错误排查 官网下载 CentOS7环境下的具体安装步骤 初始化MySQL发生错误的解决方法 忘记数据库root密码 官网下载 mysql官网下载链接:https://de ...
- Seata XA 模式示例分析
@ 目录 1 下载示例 2 示例结构 3 业务服务 business-xa 3.1 模块结构 3.2 Controller 层 3.3 Service 层 3.4 stock Feign 客户端 3. ...