Tips_关闭按钮的简单实现 && Felx实现水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin : 0;
padding: 0;
}
/* 关闭按钮 */
.card{
width: 200px;
height: 240px;
border: 1px solid #ccc;
border-radius: .2em; margin: 100px auto;
}
.cardHeader{
overflow: hidden;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
.closeCard{
display: inline-block;
padding: 0 10px;
font-size: 24px;
font-family: helvetica;
float: right;
cursor:pointer;
color: #ccc;
}
.closeCard:hover{
color: #007;
} /* flex实现水平垂直居中 */
.father{
/*以下三个设置*/
display: flex;
justify-content: center;
align-items: center; width: 400px;
height: 400px;
border: 1px solid #ccc; margin: 100px auto; }
.child{
width: 40px;
height: 60px;
background: #ccc;
}
</style>
</head>
<body>
<h3>关闭按钮</h3>
<div class="card">
<div class="cardHeader">
<span class="closeCard"> ×</span>
</div>
</div> <h3>flex实现水平垂直居中</h3>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>
Tips_关闭按钮的简单实现 && Felx实现水平垂直居中的更多相关文章
- css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁
css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
- 把简单做好也不简单-css水平垂直居中
44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...
- CSS实现水平|垂直居中漫谈
利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...
- CSS实现元素水平垂直居中—喜欢对称美，这病没得治
[TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...
- 【前端攻略】最全面的水平垂直居中方案与flexbox布局
最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- css 水平垂直居中总结
空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
随机推荐
- jquery获取value值时将数字型字符串前面的0自动截取处理方法
<li class="cwhite" value="02" id="02" onclick="getQuestionList ...
- Convolutional Pose Machines（理解）
0 - 背景 人体姿态识别存在遮挡以及关键点不清晰等主要挑战,然而,人体的关键点之间由于人体结构而具有相互关系,利用容易识别的关键点来指导难以识别关键点的检测,是提高关键点检测的一个思路.本文通过提出 ...
- 2019年一次java知识点总结
java基础 数据类型 集合与数据结构 关键字(static,rty ...) IO和网络 多线程(并发与锁,死锁) 异常 简单算法,复杂度 JVM 类加载 java内存模型 对象监听器字节码 垃圾回 ...
- PHP Request请求封装
/** * Request请求封装 * Class Request * @package tool */ class Request { // curl 请求错误码 protected static ...
- 收藏vue技术内幕
http://hcysun.me/vue-design/art/7vue-reactive.html#observer-%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0
- Android 使用gradle版本冲突
gradle默认版本冲突解决策略:自动依赖最高版本jar包 修改默认解决策略,使之出现版本错误时报错 configurations.all{ resolutionStrategy{ failOnVer ...
- 如何配置adb环境变量
如何配置adb环境变量? 1.我的电脑---控制面板---高级系统设置 2.点击[高级系统设置],弹出系统属性的弹框, 3.点击[环境变量],弹出环境变量弹框,新建一个系统变量,命名为Android ...
- Font Awesome,一套绝佳的图标字体库和CSS框架
http://fontawesome.dashgame.com/ http://www.runoob.com/font-awesome/fontawesome-tutorial.html Font A ...
- docker-elk装IK自定义分词库
本人的elasticsearch是docker环境下运行 运行elasticsearch的容器,通过docker命令:docker exec -it 955e8d32d4a9 /bin/bash 进入 ...
- python+selenium自动测试之WebDriver的常用API（基础篇二）
本篇介绍一下python+selenium复杂操作的处理,基于python3.6,selenium3.141,详细资料介绍查看官方API文档,点击这里 一.常见特殊情况处理如iframe/弹窗处理 有 ...