主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
css3应用伪类设计上下居中
2020-06-23
网页编程网
网页编程网
<style> .wrapper{ display: flex; flex-wrap: wrap;/*换行*/ justify-content: space-between; /*水平二个元素间加空白*/ width:300px; height:300px; border:1px solid red; } .ball{ margin:5px auto; width:100px; height:100px; border-radius: 50%; background-color: red; display: flex; justify-content: center; align-items: center; } .ball::after{/*用于向渲染的元素后添加内容。*/ content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; } .ball:nth-child(2){ align-self: center; } .ball:nth-child(3){ align-self: flex-end; } </style> </head> <body> <div class="wrapper"> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> </div> </body>
阅读原文
阅读
3925
123
显示电脑版