那是我在夕阳下的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 ...
随机推荐
- docker学习笔记(4)——Dockerfile
参考资料: 1.官网教程:https://docs.docker.com/engine/reference/builder/ (官网教程,稍后我做一下总结和翻译输出到本文) 2.官网练习推荐:http ...
- 如何在windows下成功的编译和安装python组件hyperscan
摘要:hyperscan 是英特尔推出的一款高性能正则表达式引擎,一次接口调用可以实现多条规则与多个对象之间的匹配,可以支持多种匹配模式,块模式和流模式,它是以PCRE为原型开发,并以BSD许可证开源 ...
- MySQL [ERROR] [MY-013183]
[ERROR] [MY-013183] [InnoDB] Assertion failure,回顾记录一次因数据库(MySql 8.0)操作不当导致的生产事故顺便记录下正常重启发生的意外和解决方法(关 ...
- 在java的继承中你是否有这样的疑惑?
一.问题 最近在写代码,有两个属性很相近的类,其中80%的属性(字段)都是一样的,剩下的才是各自不一样的,在设计的时候,采用了继承的方式,抽象除了一个父类,大概如下, 有FirstChild和Seco ...
- SQL从零到迅速精通【查询利器】
1.[列选取]从fruits表中获取f_name和f_price两列,T-SQL语句如下. SELECT f_name,f_price FROM fruits; 2.[去重]查询fruits表中s_i ...
- tp5 git 常见命令
git clone git add . # 跟踪所有改动过的文件 git commit -m "commit message" # 提交所有更新过的文件 git checkout ...
- Django-模板布局
- 解决移动端ios网页端收起键盘导致的页面空白问题
一句代码就搞定了,只要失焦的时候把窗口滚动位置设置到(0,0)就行了 <input type="text" onblur="window.scrollTo(0, 0 ...
- vue3-关于$props,$parents等引用元素和组件的注意事项
同一个组件内可以使用,但是在不同的组件内,不要用$parents或$refs来访问另一个组件内的数据, 这会使代码的耦合性变高,同时也会让代码的可读性变差, 在不同组件访问数据时,使用props等来传 ...
- Oracle视图、存过、包、方法赋予/收回权限给用户
oracle给某用户授权/回收视图查询 赋权: grant select on $_view to $_user; 这样 $_user用户就拥有了查询$_view视图的权限了 回收: revoke s ...