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. 读书笔记（chapter17）

    设备类型:在所有Unix系统中为了统一普通设备的操作所采用的分类 模块:Linux内核中用于按需加载和卸载目标码的机制 内核对象:内核数据结构中支持面对对象的简单操作,还支持维护对象之间的父子关系 1 ...

  2. 20135337——Linux内核分析：第十七章 模块与设备

    第17章 模块与设备 设备类型:在所有 Unix 系统中为了统一普通设备的操作所采用的分类. 模块: Linux 内核中用于按需加载和卸载目标码的机制. 内核对象:内核数据结构中支持面向对象的简单操作 ...

  3. 第三个Sprint ------第七天

    APP.java代码 package com.app.senior_calculator; import java.io.Serializable; import java.util.ArrayLis ...

  4. numpy行转列

    >>> a = np.array([1, 2, 3]) >>> a = a.reshape(-1, 1) #-1表示任意行数,1表示1列 >>> ...

  5. ASP.NET Web Service 标准SOAP开发案例代码（自定义验证安全头SOAPHeader）

    using System.Xml;using System.Xml.Serialization;using System.Web.Services.Protocols;using System.Con ...

  6. [百家号]雷电3和USB Type-C究竟有什么区别？

    雷电3和USB Type-C究竟有什么区别? https://baijiahao.baidu.com/s?id=1617271490773519582&wfr=spider&for=p ...

  7. Oracle一次可以查询多个表的结果的方法

    select (select count(1) from gspauresult) 权限总表, (select count(1) from gspau01result) 权限总表1, (select ...

  8. ERP开源框架 + 二次开发平台 介绍

    经历了多年软件开发,深受网络大侠们的资源共享才得以有所成绩, 本人主要是做企业ERP软件,一直有个感受,开发具体某个功能不难,但随着需求的增加,管理庞大的代码却成了最大的问题 而为企业管理所做的开发, ...

  9. C# 网络请求

    C#自带网络请求 由于偶尔会用到服务端请求,写下随笔,以便下次使用 . var Url = "http://rueiqiang.vicp.net/api/Franchisee/QueryIn ...

  10. luogu3107

    洛谷P3107题面 相对较为模板化的代码 f[i][j][bo1][bo2]记录到第i位,数字num出现了x次(j初始为20,若当前数字不为num,j++:否则j--:最后只要记录j<=20的总 ...