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. 12.11 Daily Scrum

      Today's Task Tomorrow's Task 丁辛 实现和菜谱相关的餐厅列表. 实现和菜谱相关的餐厅列表.             邓亚梅             美化搜索框UI. 美 ...

  2. Linux内核分析第八周总结

    第八章 进程的切换和系统的一般执行过程 进程调度与进程调度的时机分析 第一种分类: I/O密集型(I/O-bound):频繁的进行I/O,通常会花费很多时间等待I/O操作的完成 CPU密集型(CPU- ...

  3. Leetcode——258.各位相加【水题】

    给定一个非负整数 num,反复将各个位上的数字相加,直到结果为一位数. 示例: 输入: 38 输出: 2 解释: 各位相加的过程为:3 + 8 = 11, 1 + 1 = 2. 由于 2 是一位数,所 ...

  4. Hibernate_core_method

    /** * Created by Administrator on 2015/11/30. *HibernateUtil */public class HibernateUtil { private ...

  5. 5.1 四则运算单元测试j

    由于上个星期请假没上课,这个星期回来才知道作业,时间比较赶,个人能力又不足,作业质量不是很好 Calculator.java import java.util.Scanner; public clas ...

  6. iOS推送证书生成pem文件（详细步骤）

    1.pem文件概述 pem文件是服务器向苹果服务器做推送时候需要的文件,主要是给php向苹果服务器验证时使用,下面介绍一下pem文件的生成. 2.生成pem文件步骤 1.打开钥匙串,选择需要生成的推送 ...

  7. HDU 2032 杨辉三角

    http://acm.hdu.edu.cn/showproblem.php?pid=2032 Problem Description 还记得中学时候学过的杨辉三角吗?具体的定义这里不再描述,你可以参考 ...

  8. angular4 组件通讯、生命周期

    主要通讯形式 父组件通过属性绑定到子组件,子组件通过事件传递参数到父组件 父组件通过局部变量获取子组件的引用 父组件使用@ViewChild获取子组件的引用 两个不相关联的组件使用中间人模式交互 终极 ...

  9. pandas.Series

    1.系列(Series)是能够保存任何类型的数据(整数,字符串,浮点数,Python对象等)的一维标记数组.轴标签统称为索引. Pandas系列可以使用以下构造函数创建 - pandas.Series ...

  10. Delphi 2010 3513正式版破解

    Delphi 2010 3513正式 一.下载ISO文件右键迅雷下载 二.安装完成后,先运行一下程序,程序会弹出叫你注册对话框,逐步点击Cancel---->OK----->No----& ...