CSS常用布局学习笔记
水平居中—行内元素
如果是文字和图片这类的行内元素,则在其父级元素
上加上样式:text-align:center;
水平居中—定宽块元素
div{
width:100px;
margin:0 auto;
}
水平居中—不定宽块元素1
步骤:
- 添加table元素
- table的左右margin设置为auto
<table>
<tbody>
<tr>
<td><div class="wrap">
设置我所在的div容器水平居中
</div></td>
</tr>
</tbody>
</table>
table{margin: 0 auto;}
.wrap{background: #333;color: #fff;}
水平居中—不定宽块元素2
步骤:
- 设置该块元素为
display:inline;
- 设置该元素的父元素
text-align:center;
水平居中—不定宽块元素3
步骤:
- 设置父级元素样式为
float:left;position:relative;left:50%;
- 设置该元素样式为
position:relative;left:-50%;
垂直居中—父元素高度确定的单行文本
设置父元素的 height
和line-height
一致即可
垂直居中—父元素高度确定的多行文本1
针对父元素高度确定的多行文本、图片、块状元素的竖直居中
步骤:
- 父元素外加table
- 子元素设置
vertical-align="middle"
【只对td、th有效,且默认为middle,所以不写也可】
垂直居中—父元素高度确定的多行文本2
针对父元素高度确定的多行文本、图片、块状元素的竖直居中
设置父元素的 display
为 table-cell
,激活 vertical-align
属性,但注意 IE6、7 并不支持这个样式。
CSS常用布局学习笔记的更多相关文章
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- CSS flex 布局学习笔记
写在前面 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. 采用 Flex 布局的元素 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- 从今天开始 每天记录HTML,CSS 部分的学习笔记
从今天开始 每天记录HTML,CSS 部分的学习笔记
- mongodb常用命令学习笔记
mongodb常用命令学习笔记 创建数据库 use DATABASE_NAME eg: use users; 如果数据库不存在,则创建数据库,否则切换到指定数据库.要显示刚刚创建的数据库,需要向数据库 ...
- 7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记 由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式 本文的 ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...
随机推荐
- PHP代码获取客户端IP地址经纬度及所在城市
echo $_SERVER['HTTP_HOST'];//echo $_SERVER['REQUEST_URI'];$getIp=$_SERVER["REMOTE_ADDR"];e ...
- JAVA基础学习——1.0 Java概述
Java语言 SUN公司 1995年推出的高级编程语言 ■ 主要应用方向 Web开发和Android开发 ■ 主要特点 平台无关性:能运行于不同的平台上 安全性:去掉了指针操作,内存由操作 ...
- ASP.NET中的chart控件绑定SQL Server数据库
网上很多的chart控件的实例都没有绑定数据库,经过一番摸索后,终于实现了chart控件绑定数据库. 首先,在Visual Studio中建立一个网站,新建一个WebForm项目,名称为ChartTe ...
- _NSInlineData objectForKeyedSubscript:
最近总是遇到这个错误:reason: '-[_NSInlineData objectForKeyedSubscript:]: unrecognized selector sent to instanc ...
- MFC 静态文本的自绘 空心字的实现
想在对话框里,显示几个字是很简单的,只要用静态文本的输出就可以了.然而有时候我们需要显示特效的字,我们希望显示的文字就像Word里的艺术字一样,看起来美观.这时我们可以重写CStatic类.用Draw ...
- myeclipse maven 安装
myeclipse 上安装 Maven3 环境准备: JDK 1.6.45 Maven 3.0.5 myeclipse 8.5 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Ma ...
- addEventListener详解
为什么需要addEventListener? 先来看一个片段: html代码 <div id="box">追梦子</div> 用on的代码 window.o ...
- 【Java EE 学习 78 下】【数据采集系统第十天】【数据采集系统完成】
一.项目源代码地址 二.项目演示
- 重置VS设置
用VS开发项目的时候, 偶发智能提示消失.关键字.类名不变色的情况. 如果你也遇到过,那么这样做: 新建txt,打开并输入以下内容: start "" "C:\Progr ...
- RSA密钥之C#格式与Java格式转换
前言 最近由于项目需求,服务端由c#编写,客户端由java编写.通信数据使用RSA非对称加密.但是java和c#生成的密钥格式是不一样的,所以需要转换格式才可以正常使用.网上搜到使用java进行格式转 ...