当被设置元素为块状元素时用text-align：center就不起作用了，这也分两种情况，定宽块状元素和不定宽块状元素。

一.定宽块状元素：快状元素的宽度width为固定值，之后我们可以将左右margin值设置为auto来实线居中。

<html>

<head>

<style>

div{

margin-left:auto;

margin-right:auto;

width:200px;

border:2px red solid;

}

</style>

</head>

<body>

<div>123</div>

</body>

<html>

这种方法必须要有width和margin值为auto才能成功。

二.

不定宽块状元素方法（一）：

加入table标签，这种方法是利用table标签的长度自适应性，即不定义其长度也不默认父元素body的长度，因此可以看做一个定宽度元素，然后在利用定宽度块状居中的margin的方法，使其居中。

第一步：为需要设置的居中的元素外面加入一个table标签。

第二步：为这个table设置左右margin居中。

<html>

<head>

<style>

table{

border:1px solid;

margin:0 auto;

}

</style>

</head>

<body>

<div>

<table>

<tbody>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

</tbody>

</table>

</body>

</html>

不定宽块状元素方法（二）：

出来上面讲到的插入table标签，可以使不定宽快船个元素水平居中之外，本节介绍的方法，改变元素的display类型为行内元素，利用其属性直接设置。

第二种方法：改变块级元素的display为inline类型，然后使用text-align：center实线居中效果，如下：

<html>

<head>

<style>

div{

text-align:center;

}
ul{
display:inline;
}
li{
display:inline;
}

</style>

</head>

<body>

<div>

<ul>

<li>123</li>

<li>123</li>

</ul>

</div>

</body>

</html>

不定宽块状元素方法（三）

出来前两节讲到的插入table标签，以及改变元素的display类型，第三种实现的方法，设置浮动和相对定位来实线。

通过给父元素设置float，然后给父元素设置position:relative和left:-50%来实线水平居中。

我们可以这样理解：假象ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的父层（div层）的平分线对其；而li层的css代码则是将li层的最左端（也是div层的平分线）对齐，从而实线li层的居中。

<body>

<div class="container">

    <ul>

        <li><123/li>

    </ul>

</div>

</body>

<style>

.container{

float:left;

position:relative;

left:50;

}

.container ul{

list-style:none;

margin:0;

padding:0;

position:relative;

left:-50%;

}

.container li{

float:left;display:inline;margin-right:8px;}

</style>

　　

css各项水平居中的更多相关文章

  1. css如何实现水平居中呢？css实现水平居中的方法？

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

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

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

  3. CSS垂直水平居中方法总结

    在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...

  4. CSS垂直水平居中方法整理

    CSS定位中常常用到垂直居中,比如覆盖层上的弹框. 兼容性比较好的方法: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transition ...

  5. css布局--水平居中

    一.水平居中 1. 使用text-align和display:inline-block实现水平居中 html <div class="parent"> <div ...

  6. CSS中水平居中的方法

    居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...

  7. css的水平居中和垂直居中总结

    Html代码: <div class="md-warp"> <div class="md-main">块级元素</div> ...

  8. CSS：水平居中与垂直居中

    CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中. 水平居中 1.行内元素 行内元素(主 ...

  9. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

随机推荐

  1. [转] Android 4.4中播放HTML5视频<video>的Bug

    近期Nexus 4手机自动升级到Android4.4,本来挺好的一件事儿,结果发现自己的应用中出现一个Bug,应用中使用了Webview播放HTML5视频,代码如下: <video width= ...

  2. Android开发学习---如何写数据到外部存储设备(sd卡),Environment.getExternalStorageDirectory,怎么获取sd卡的大小?

    本文主要介绍如何写数据到sd卡,这里主要到的技术是Environment中的方法. 1. 2.实现代码: /datasave/src/com/amos/datasave/savePasswordSer ...

  3. 小程序de 一些经验1

    尝试着写微信的小程序,一个简单的表单验证.一开始就花了大把的时间尝试如何开始小程序的准备工作. 鼓捣半天,AppId是没有的,于是用了不用appId的模拟版.其实只要下载一个小程序版的微信开发工具. ...

  4. js正则获取图片的src属性及正则分割一个字符串

    try{     var str='<P>xczxzxzxcxcxc<IMG src="http://file.ynet.com/2/1612/12/12119048.jp ...

  5. Android开发工具全面转向Android Studio(1)——准备开发环境

    工欲善其事必先利其器,本文适合Android新手以及用过Eclipse而没用过Android Studio开发Android的老手,众所周知,谷歌是不会再维护和开发ADT了,旧的ADT已经是完全不能渲 ...

  6. Asp.Net MVC4入门指南（7）：给电影表和模型添加新字段

    在本节中,您将使用Entity Framework Code First来实现模型类上的操作.从而使得这些操作和变更,可以应用到数据库中. 默认情况下,就像您在之前的教程中所作的那样,使用 Entit ...

  7. android 获取系统联系人 完全解析

    一.代码 1.ContactsEngine.java import java.util.ArrayList; import java.util.HashMap; import java.util.Li ...

  8. 20151210study

    -----------------------------------------------------The election officials were not neutral.选举官员并不是 ...

  9. iOS 8下使用xib/storybord AutoLayout导致的分割线问题

    /*** iOS8 分割线问题 在xib/storyboard下面解决方案 http://qiita.com/yimajo/items/10f16629200f1beb7852 http://www. ...

  10. C# 中科学计数法转成正常值

    抓取数据的时候碰到科学技术法,查了一些资料,直接贴代码 /// <summary> /// 数字科学计数法处理 /// </summary> /// <param nam ...