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. warning C4996: 'strcpy': This function or variable may be unsafe.

    mkdir 写成  _mkdir strcpy 写成为 strcpy_s 或是在项目处右击-->属性-->C/C++-->预处理器-->在预处理器定义后添加";_CR ...

  2. 安装python包时报错

    pip install numpy  时  报错: Traceback (most recent call last):  File "d:\学习\python\python-3.6.5\l ...

  3. Install Jetty web server on CentOS 7 / RHEL 7

    http://www.eclipse.org/jetty/download.html http://www.eclipse.org/jetty/documentation/current/startu ...

  4. 全新OCR3500数据

    改装: 手变6700,夹器彦豪R741,牙盘5700,前拨5700,后拨5701,飞轮5700,链条YBN S10 S2,弯把DEDA RHM01,前叉山寨BIANCHI K-VID,轮组FULCRU ...

  5. ESXi安装时遇到不识别的硬件的处理

    1. 部门新购置了一台inspur 四路 NF8480M4的服务器. 上架之后发现ESXi的标准安装盘无法安装. 找不到磁盘安装介质. 2. 处理办法, 找浪潮专家服务,报上序列号,要上相关的一些软件 ...

  6. memcache 分布式缓存

    转载地址:http://www.cnblogs.com/phpstudy2015-6/p/6713164.html 作者:那一叶随风 1.memcached分布式简介 memcached虽然称为“分布 ...

  7. Node fs模块异步读取验证并异步写入

    console.log("1:开始读成取文件内容...");fs.readFile('./public/2.log',function(err,data){ if(err){ co ...

  8. 转《Angular4项目部署到服务器上刷新404解决办法》

    刚遇到Angular4项目npm run build 后部署到服务器可以访问,但是刷新页面会出现404的错误!转载一大神的操作 解决angular2页面刷新后报404错误办法: 配置app.modul ...

  9. python matplotlib绘图

    import numpy as np import matplotlib.pyplot as plt from scipy.constants.constants import alpha from ...

  10. GlusterFS卷的优化

    GlusterFS可以通过配置选项来优化卷 配置选项 用途 默认值 合法值 network.ping-timeout    客户端等待检查服务器是否响应的持续时间,节点挂了数据不能写入 42 0-42 ...