1、文本内容居中对齐:text-align。
扩展用法：父元素嵌套子元素时，且子元素的宽度小于父元素宽度，使用text-align:center，可以实现子元素的居中对齐。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>文本内容水平居中</title>

     <style>

         .text-center{

             border:3px solid red;

             text-align: center;

             /*text-align: right;*/

         }

     </style>

 </head>

 <body>

     <div class="text-center">

         水平居中对齐

     </div>

 </body>

 </html>

2、图片居中对齐:先指定width,display:block(前提)，再使用margin:auto。(非块级元素使用margin:auto时，不会居中，必须指定display:block，才会居中)

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>图片水平居中对齐</title>

     <style>

         /*

         margin:auto，对行内元素不起作用，所以需要把图片display:block，变成一个块级元素，同时设置图片的width，

         margin:auto才会起作用

         */

         img{

             display: block;

             margin: auto;

             width: 200px;

             height: 200px;

         }

     </style>

 </head>

 <body>

     <img src="./suihua.png"  alt="">

 </body>

 </html>

3、元素左对齐、元素右对齐、元素居中对齐

元素居中对齐:先指定width(前提)，再使用margin:auto
左右对齐解决方式一:position和left:0或right:0
左右对齐解决方式二:position和float:left或float:right

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>元素水平居中对齐、左对齐、右对齐</title>

     <style>

         /* 设置body元素的margin:0，padding:0，从而达到在所有浏览器一样的效果

            不设置的情况下，不同的浏览器，body元素的margin和padding默认值不一样

         */

         body{

             margin:0;

             padding: 0;

         }

         /*

             元素水平居中对齐：同时指定width和margin:auto就可以实现

             不指定width，margin:auto不会起作用，实现不了水平居中对齐

         */

         .center{

             border:3px solid red;

             width: 50%;

             margin: auto;

         }

         /*利用postion，加left:0或right:0，从而实现元素的左对齐和右对齐*/

         .container1{

             position:relative;

             border: solid 3px red;

         }

         .right1{

             background-color: lightblue;

             width: 200px;

             height: 100px;

             position: absolute;

             right:0;      /*右对齐*/

             /*left:0;   左对齐*/

         }

         /*利用float*/

         .container2{

             position:relative;

             border: solid 3px red;

             overflow: auto;

         }

         .right2{

             background-color: lightblue;

             width: 200px;

             height: 100px;

             float: right;

         }

     </style>

 </head>

 <body>

     <h1>元素水平居中对齐</h1>

     <div class="center">

         center align

     </div>

     <h1>元素水平左右对齐方式一</h1>

     <div class="container1">

         <div class="right1">

             <p>段落的内容</p>

         </div>

     </div>

     <br/><br/><br/><br/><br/><br/><br/>

     <h1>元素水平左右对齐方式二</h1>

     <div class="container2">

         <div class="right2">

             <p>段落的内容</p>

         </div>

     </div>

 </body>

 </html>

4、垂直居中对齐

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>垂直居中对齐</title>

     <style>

         /*垂直居中对齐实现方式一:通过padding属性来实现。(当元素指定了height，通过padding来实现垂直居中就不好使了)*/

         .center1{

             border: 3px solid red;

             padding:100px 0;     /*上下100px，左右0*/

             text-align: center;

         }

         /*组合选择器*/

         .center1 p{

             text-align: center;

         }

         /*

         垂直居中对齐实现方式二:line-height等于元素的height,这样已经贴近居中了，还没有完全居中,

         还需要结合下方的【.center2 p】组合选择器中的 display:inline-block  和 line-height:1 才能实现全部居中

         */

         .center2{

             border: 3px solid red;

             height: 200px;

             line-height: 200px;

             text-align: center;

         }

         .center2 p{

             text-align: center;

             line-height: 1;

             display:inline-block;

         }

         /*垂直居中对齐实现方式三:position*/

         .center3{

             border:3px solid red;

             height:200px;

             text-align: center;

             position: relative;

         }

         .center3 p{

             text-align: center;

             position: absolute;

             margin: 0;

             top: 50%;

             left: 50%;

             transform: translate(-50%,-50%);    /*微调x,y轴方向,第一个-50%表示x轴往左移，第二个50%表示y轴往上移*/

         }

     </style>

 </head>

 <body>

     <h1>vertically align</h1>

     <div class="center3">

         <p>段落的内容，希望它垂直居中</p>

     </div>

 </body>

 </html>

【CSS】定义元素的对齐方式的更多相关文章

  1. css将两个元素水平对齐，兼容IE8

    css实现元素水平对齐 css实现水平对齐,如图 有人会说css实现这种水平对齐要兼容ie8还不简单吗?使用float: left,或者display: inline-block,不就可以了吗?是的, ...

  2. 【CSS】定义元素的位置

    CSS定义元素的位置html元素的position属性,有4个属性值,分别是static.relative.fixed.absolute static: 1.默认值,一般不显式设置为static 2. ...

  3. css 块元素、内联元素、内联块元素

    块元素.内联元素.内联块元素: 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素,了解这三种元素的特性,才能熟练的进行页面布局. 块元素: 块元素,也可以称为行元素,布局中常用的标签 ...

  4. C语言中内存对齐方式

    一.什么是对齐,以及为什么要对齐: 1. 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访问可以从任何地址开始,但实际情况是在访问特定变量的时候经常在特定的内存地址访问, ...

  5. CSS 块元素、内联元素、内联块元素三者的区别与转换

    三种元素 块元素 内联元素 内联块元素 元素之间的转换 三种元素 元素就是标签,布局中常用的有三种标签,块元素.内联元素.内联块元素. 了解这三种元素的特性,才能熟练的进行页面布局. 块元素 块元素, ...

  6. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  7. css点滴1—八种方式实现元素垂直居中

    这里介绍实现元素垂直居中的方式,文章是参考了<css制作水平垂直居中对齐>这一篇文章. 1.行高和高度实现 这种方式实现单行垂直居中是很简单的,但是要保证元素内容是单行的,并且其高度是不变 ...

  8. 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素

    CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...

  9. css属性之统一设置文本及div之间的对齐方式

    设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效.hdp-uf{ display: -webkit-box; /* 老版本语法: Safari, iOS ...

随机推荐

  1. Linux内核分析——Linux内核学习总结

    马悦+原创作品转载请注明出处+<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 Linux内核学习总结 一 ...

  2. MySQL 单表优化

    一.表字段优化 1.整数类型尽量使用 TINYINT.SMALLINT.MEDIUM_INT 而不是INT,非负数要加上UNSIGNED 2.VARCHAR的长度分配要合理,不要过大 3.时间字段不超 ...

  3. Git的其他用法

    目录: 减少[.git]文件夹的大小和文件数 更换git for windows的文本编辑器 修改已经提交的commit说明 合并commit 解决merge时出现的冲突 回退一个merge 获取某一 ...

  4. Appium学习笔记4_元素定位方法

    Appium之元素定位,如果对Android上如何使用工具获取页面元素有问题的,请转战到这:http://www.cnblogs.com/taoSir/p/4816382.html. 下面主要是针对自 ...

  5. BOM嵌套简单写法

    WITHTREE AS( SELECT a.FItemID cfitemid,b.FItemID pfitemid FROM dbo.ICBOMChild a,dbo.ICBOM b WHERE a. ...

  6. python 授权

    1.“包装”意思是一个已经存在的对象进行包装,不管他是数据类型还是一段代码,可以是对一个已经存在的对象增加新的,删除不要的或者修改其他已经存在的功能 2.包装 包括定义一个类,他的实例拥有标准类型的核 ...

  7. fio 磁盘性能

    /fio -ioengine=libaio -bs=32k -direct=1 -thread -rw=randrw -percentage_random=100,0 -size=10G -filen ...

  8. BZOJ2843极地旅行社&BZOJ1180[CROATIAN2009]OTOCI——LCT

    题目描述 给出n个结点以及每个点初始时对应的权值wi.起始时点与点之间没有连边.有3类操作:  1.bridge A B:询问结点A与结点B是否连通. 如果是则输出“no”.否则输出“yes”,并且在 ...

  9. VMware下Mac系统自适应屏幕

    1.下载VMwareTool工具镜像 链接:https://pan.baidu.com/s/1gvXBdzrwYyOEl6yhJurUig 提取码:s1po 2.打开Mac系统,推出DVD 2.设置连 ...

  10. Codeforces976E Well played! 【贪心】

    题目分析: 由于乘二的收获很大,所以我们可以证明乘的数一定是同一个,接着排序后依次选取,判断一下即可. 题目代码: #include<bits/stdc++.h> using namesp ...