• 行内元素:     div,p{text-align:center;}

  • 定宽块状元素:  第一宽度固定,第二margin-left和margin-right均是auto。div{border:1px solid red;width:200px;margin:20px auto;}

  • 不定宽块状元素方法

  1. 加入 table 标签( 包括 <tbody>、<tr>、<td> )。

  2. 设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置,设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的。{display:inline; position:relative; left:50%;}

  3. {display:table; margin:0 auto;}也可以是实现

  1. 设置 display: inline 方法:先设置为行内元素,再设置center,这种一般针对ul和ol。如如所示:

  2. 通过给父元素设置float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中

css之水平居中设置的更多相关文章

  1. CSS中水平居中设置的几种方式

    1.行内元素: 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. <body> <div class="t ...

  2. css如何实现水平居中呢?css实现水平居中的方法?

    面试中遇到的一个问题:如何让css实现水平居中?下面来看一下哪些方法能实现水平居中. 首先分两种情况,行内元素还是块级元素.然而块级元素又分为定宽块状元素和不定款块状元素.先来看下行内元素如何水平居中 ...

  3. CSS的水平居中和垂直居中解决方案

    在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...

  4. CSS的position设置

    CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...

  5. css background之设置图片为背景技巧

    css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...

  6. css颜色的设置

    css的颜色设置 1.英文命令颜色 p{color:blue;}RGB颜色 2.与 photoshop 中的 RGB 颜色一致,由 R(red).G(green).B(blue) 三种颜色的比例来配色 ...

  7. css absolute同时设置top bottom

    css absolute同时设置top bottom 确定div的高度,若设置了左边框,那么这条边框的高度将随着父定位上下文高度的变大而变大 http://www.webfront-js.com/ar ...

  8. CSS border-right-style属性设置元素的右边框样式

    CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...

  9. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

随机推荐

  1. ExtJS6 自适应浏览器窗口大小

    ExtJS6官方文档推荐使用Ext.on.做一个小例子,创建一个Panel显示在页面上,使它的大小随浏览器变化,自适应浏览器窗口大小. html:增加一个css样式给Panel加上红色border. ...

  2. 判断IE版本的HTML语句详解,如:[if lte IE 9]……[endif]

    我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请看下文: <!--[if ! ...

  3. 【javascript】 for循环小技巧

    最近在读[Jquery技术内幕],里面介绍了一种js for循环的实用写法. 一般写for循环是这么写的: var elemts = [1,2,3,4,5]; for(var i=0; i<el ...

  4. 转-JS之Window对象

    一.说明:他是JS中最大的对象,它描述的是一个浏览器窗口,一般要引用他的属性和方法时,不需要用“Window.XXX”这种形式,而是直接使用“XXX”.一个框架页面也是一个窗口. 二.Window窗口 ...

  5. Sina App Engine(SAE)入门教程(5)- SaeSegment(中文分词服务)使用

    分词能干什么? 提取一篇文章的关键字 检测特定的段落中有没有违禁词 智能机器人 …..尽你所想 开启SAE 分词服务 首先你需要在sae的管理面板开始分词服务后才能使用sae的服务.具体的开启操作: ...

  6. mysql自动备份数据库

    可以选择设置需要备份的库,自动备份压缩,自动删除 7 天前的备份,需要使用 crontab 定时执行. #!/bin/bash # 要备份的数据库名,多个数据库用空格分开 databases=(db1 ...

  7. 编程书籍分享--pdf

    作为程序员,我觉得我们应该多学习.多思考.多分享. 今天就花费了一点时间把这几年搜集的编程资料上传到了网上做个分享, 其中涵盖.net .java.js.html5.css3.mysql.sqlser ...

  8. 把测试app打包成ipa文件

    我终于把我的程序放到我的touch上了,其实把app放到touch上还有很多办法,这篇教程是主要讲怎么把app注册了,然后打包成一个ipa文件的. 先上官方文档:https://developer.a ...

  9. js call方法介绍

    call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN ...

  10. Spring_database_Template

    配置applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans ...