CSS 基础 例子 水平 & 垂直对齐
一、元素居中对齐 margin:auto
水平居中对齐一个元素(如 <div>),即div本身在容器中的对齐，用margin:auto,而且，需要设置 width 属性(或者设置 100%)，否则，居中对齐将不起作用。
二、文本居中对齐 text-align:center
文本在所在元素内水平居中对齐，可以使用 text-align: center;
三、图片居中对齐 margin:auto
而且放在块元素中
四、左右对齐-使用定位方式
position: absolute; 属性来对齐元素，绝对定位会把元素从正常流中删除（不再占住位置），而且可以和其他元素交叠。
没有使用绝对定位时候：
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- .right {
- right: 0px;
- width: 300px;
- border: 3px solid #73AD21;
- padding: 10px;
- }
- </style>
- </head>
- <body>
- <h2>右对齐</h2>
- <p>以下实例演示了如何使用 position 来实现右对齐:</p>
- <div class="right">
- <p>菜鸟教程 -- 学的不仅是技术，更是梦想！！</p>
- </div>
- <div style="background-color:red;height:100px"></div>
- </body>
- </html>
运行结果：
绝对定位：
五、左右对齐 - 使用 float 方式
六、垂直居中对齐 padding
七、水平和垂直居中对齐 padding + text-align:center
八、水平和垂直居中对齐-line-height + text-align:center
行高和高要相等
CSS 基础 例子 水平 & 垂直对齐的更多相关文章
- CSS 布局 - 水平 & 垂直对齐
CSS 布局 - 水平 & 垂直对齐 一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘 ...
- CSS：CSS 布局 - 水平 & 垂直对齐
ylbtech-CSS:CSS 布局 - 水平 & 垂直对齐 1.返回顶部 1. CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个 ...
- 解读CSS布局之-水平垂直居
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- CSS中关于vertical-align垂直对齐
一向以来,我对vertical-align的属性都搞的不是太清楚,今天刚好碰到有朋友问我相关的问题,于是自己潜心研究了一番,发现这玩意还真不是个简单的东西,在此我分享的东西都是抛弃脑残的IE的,如果你 ...
- CSS 布局水平 & 垂直对齐
元素居中对齐 margin: auto; 文本居中对齐 text-align: center; 图片居中对齐 要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中 左右对齐 ...
- CSS 基础 例子 display属性：block、inline和inline-block的区别
HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...
- CSS 基础 例子 行高line-height
“行高“指一行文字的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line-height 属性会影响行框的布局.在应用到一个块级元素时,它定 ...
- CSS 基础 例子 定位及z-index
position 属性指定了元素的定位类型. position 属性的四个值: static 不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...
- CSS 基础 例子 伪元素和伪类 & 区别
一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素 -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...
随机推荐
- geoserver 发布无坐标png
1.geoserver 安装一些插件的时候,直接去http://docs.geoserver.org/ 官网,选择自己geoserver对应的版本的插件就可以了. 2.geoserver 发布自身带有 ...
- Codeforces55D Beautiful numbers
原题链接 虽然依旧是套模板,但是因为我太弱了,不会建状态,所以去看了题解.. 这里就直接引用我看的题解吧,写的不错的. 题解 //我的代码 #include<cstdio> #includ ...
- Codeforces559C Gerald and Giant Chess
一道计数类\(DP\) 原题链接 我们可以先计算从左上角到右下角总的路径,再减去经过黑色方格的路径即是答案. 总路径数可以用组合数直接计算:\(C_{H+W-2}^{H-1}\) 因为从左上角到右下角 ...
- Python实现的复杂的计算器的代码
用Python实现复杂的计算器,可以按照“()”.乘除.加减的优先级进行混合运算.主旨是对正则表达式进行学习. 设计思路: 1.在计算式中搜索最后一个“(”,再搜索和它匹配的“)”,截取两个括号间的表 ...
- 20180613更新 leetcode刷题
最近就是忙工作项目 工作间隙就刷了刷LEETCODE 所以没啥更新 // 1111111.cpp: 定义控制台应用程序的入口点. // #include "stdafx.h" #i ...
- reduce 之 mixin实现
语法: arr.reduce(callback[, initialValue]) 参数: callback:执行数组中每个值的函数,包含四个参数: accumulator:累加器累加回调的 ...
- centos6.5 yum安装postgresql9.3
rpm -ivh http://download.postgresql.org/pub/repos/yum/9.3/redhat/rhel-6-x86_64/pgdg-centos93-9.3-2.n ...
- mybatis学习 十五 resultMap标签 一对多
多次查询,非联合查询版本 <resultMap type="teacher" id="techMap"> <id column="i ...
- js文件中获取${pageContext.request.contextPath}
一般从 JSP文件中,可以直接使用 ${pageContext.request.contextPath}非常方便的获得当前页面的路径,用来处理被 Apache2代理之后出现 URL变化的问题,比如增加 ...
- 2019.01.03 bzoj3456: 城市规划（生成函数+多项式取对）
传送门 生成函数好题. 题意:求n个点的简单(无重边无自环)无向连通图数目 思路: 对简单无向图构造生成函数f(x)=∑n2Cn2xnn!f(x)=\sum_n2^{C_n^2}\frac{x^n}{ ...