当被设置元素为块状元素时用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. Sublime text 3 中Package Control 的安装与使用方法和解决Sublime Text 3不能正确显示中文的问题

    Sublime text 3 中Package Control 的安装与使用方法,英文好可以在这个网址看看, 下面简单的说明一下 : https://packagecontrol.io/install ...

  2. flash中网页跳转总结

    浏览器中,程序同时跳转两个网页地址,第一个地址不会跳转,只会跳转第二个地址,如果第二个地址做延时,则第一个正常跳转,第二个地址会被拦截: 浏览器中,接口返回事件的函数中不能程序跳转网页地址. 这两条结 ...

  3. C#获得客户端IP

    代码: /// <summary> /// 获得当前页面客户端的IP /// </summary> /// <returns>当前页面客户端的IP</retu ...

  4. 深入理解Java虚拟机(一)、Java内存区域与内存溢出异常

    Java虚拟机所管理的内存包括以下几个运行时数据区: 程序计数器(PCR): 1.是一块较小的内存空间,可以看做是当前线程所执行的字节码的行号指示器 2.为线程私有 3.执行Java方法有PCR,执行 ...

  5. tomcat(一)--java基础

    什么是java java所涉及到的相关概念如下图.总体来说就是java语言.java API.jvm等构成. jvm:java虚拟机,java的代码都是运行在jvm上,这是java语言跨平台的保证,针 ...

  6. POJ 3057 Evacuation 二分图匹配

    每个门每个时间只能出一个人,那就把每个门拆成多个,对应每个时间. 不断增加时间,然后增广,直到最大匹配. //#pragma comment(linker, "/STACK:10240000 ...

  7. android中回调函数机制完全解析

    1.在要调用的业务操作中,创建一个接口,在接口中创建方法,这个方法表示的是我们原先要在业务类中执行的操作 public interface BackUpSmsListener { /** * 设置总进 ...

  8. sql 中 in与exists的对比

    1.exists只能用于子查询,可以替代IN,如果查询到结果则退出内部查询,并将条件标记为TRUE,传回全部结果资料 in 不管匹配到匹配不到,都全部匹配 2.根据上面的解释可以得出结论:如果子查询结 ...

  9. Spring 4 官方文档学习(十三)集成其他web框架

    重点是通用配置,非常建议看一下!有助于理解Spring的ApplicationContext与Servlet Container的关系! 1.介绍 Spring Web Flow SWF目标是成为we ...

  10. android nio

    Android开发进阶之NIO非阻塞包(二) 有关Android NIO我们主要分为三大类,ByteBuffer.FileChannel和SocketChannel.由于篇幅原因今天Android12 ...