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实践：模块

    标签(空格分隔): 20135321余佳源 一.实践原理 Linux模块是一些可以作为独立程序来编译的函数和数据类型的集合.之所以提供模块机制,是因为Linux本身是一个单内核.单内核由于所有内容都集 ...

  2. pl/sql破解方法

    转载源:http://blog.csdn.net/oscar999/article/details/2123803 打开注册表在run下输入regedit删除1.HKEY_CURRENT_USER/S ...

  3. mysql执行 sql文件遇到USING BTREE ) ENGINE=MyISAM DEFAULT CHARSET=utf8错误

    使用navcat在导入别人发的mysql数据的时候,报了下面这个错误: [Err] 1064 - You have an error in your SQL syntax; check the man ...

  4. Python学习笔记——Python Number(数字)

    Python Number 类型转换 int(x, y) #将x转换为一个整数,y为进制数.如 int('11',2)将二进制数的11转成十进制数的整数,结果为3 long(x, y) #将x转换为一 ...

  5. Maven入门指南④：仓库

    1 . 仓库简介 没有 Maven 时,项目用到的 .jar 文件通常需要拷贝到 /lib 目录,项目多了,拷贝的文件副本就多了,占用磁盘空间,且难于管理.Maven 使用一个称之为仓库的目录,根据构 ...

  6. [转帖] linux下面 vim 数字键无法插入的解决办法

    感谢原作者: https://blog.csdn.net/guoyuqi0554/article/details/11477597 这个问题困扰自己好久了.. 刚才解决了 rlwrap的问题 这会儿 ...

  7. Delphi 导出数据至Excel的7种方法【转】

    一; delphi 快速导出excel   uses ComObj,clipbrd;   function ToExcel(sfilename:string; ADOQuery:TADOQuery): ...

  8. zabbix2.2 - /tmp/FromDualMySQLagent.lock already exists

    最近升级了线上的zabbix server版本,升级成功后发现日志中一直报出history和history-uint表的主键冲突数据插入不成功的信息,根据主键冲突发生的itemid去库里查,如下 my ...

  9. Python——socketsever模块

    1.作用:同时与多个客户端通信 import socketserver class MyServer(skcketserver.BaseRequestHandler): def handle(self ...

  10. Tomcat server.xml中Connector配置参数详解

    Tomcat中Connector常用配置 Tomcat中server.xml有些配置信息是需要我们了解的,最起码知道如何进行简单的调试. <Connector port="8080&q ...