面试中遇到的一个问题:如何让css实现水平居中?下面来看一下哪些方法能实现水平居中。

首先分两种情况,行内元素还是块级元素。然而块级元素又分为定宽块状元素和不定款块状元素。先来看下行内元素如何水平居中:

一、行内元素居中:

如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。如下实例:

html代码:

<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

css代码:

<style>
.txtCenter{
text-align:center;
}
</style>

运行结果:

二、块级元素水平居中:

块级元素有两种:定宽块状元素、不定宽块状元素。先来看一下定宽块状元素:

  1. 定宽块状元素:要想让定宽块状元素水平居中,只需要设置margin-left和margin-right为auto即可实现水平居中。

W3 CSS 2.1 第十章里为常规流替换和非替换块级元素定义了这个算式:

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = width of containing block

即左margin+左border+左padding+width+右padding+右border+右margin = 包含块宽度。也就是宽度一定时,若左右边距为auto,浏览器会取它的容器和该容器的宽度之差,除以2,作为该元素的左边距和右边距

同时为几项auto设置了额外的算法:

If there is exactly one value specified as 'auto', its used value follows from the equality.
If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.
If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

以上是水平居中的原理。代码实例:

html代码:

<body>
<div>我是定宽块状元素,哈哈,我要水平居中显示,你来打我啊哈哈。</div>
</body>

css代码:

<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/
margin:0px auto;/* margin-left 与 margin-right 设置为 auto */
}

自行运行咯,小的就不在这放运行结果咯。

2、不定宽块状元素水平居中:3种方法:

  • 方法一:加入table标签:

    第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

    第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

    原理:是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法margin:0 auto,使其水平居中。代码实例如下:

html代码:

<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>

css代码:

<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
  • 方法二:改变块级元素的display为行内元素inline,然后再利用text-align:center设置居中。实例如下:

html代码:

<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>

css代码:

<style>
.container{
text-align:center;
}
/* margin:0;padding:0(消除文本与div边框之间的间隙)*/
.container ul{
list-style:none;
margin:;
padding:;
display:inline;
}
/* margin-right:8px(设置li文本之间的间隔)*/
.container li{
margin-right:8px;
display:inline;
}
</style>

注:这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

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

html代码:

<body>
<div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>

css代码:

 <style>
.wrap{
position:relative;
float:left;
left:50%;
}
.wrap-center{
background:#ccc;
float:left;
position:relative;
left:-50%; }
</style>

三种方法各有优缺点,具体使用哪种方法视情况而定。

最新文章

  1. Vue 源码解析:深入响应式原理(上)
  2. 处于同一个域中的两台Sql server 实例无法连接
  3. oracle免安装客户端设置
  4. mysql 启动错误-server PID file could not be found
  5. -_-#URL区分大小写吗
  6. 多目录下多文件 makefile编写
  7. Qt5:Qt程序不在任务拦显示图标
  8. 2.2Bind建立配置文件和实体的映射「深入浅出ASP.NET Core系列」
  9. 第五章 服务容错保护:Spring Cloud Hystrix
  10. 三、PyQt5不同方法创建菜单栏、工具栏和状态栏
  11. linux下安装SlickEdit
  12. python 之 递归
  13. Centos7 zookeeper单机/集群安装详解和开机自启
  14. Java_9 面向对象
  15. Dinic算法——重述
  16. Entity Framework(EF) Code First将实体中的string属性映射成text类型的几种方式
  17. DFT
  18. Textarea的readonly问题
  19. PHP中exit,exit(0),exit(1),exit(&#39;0&#39;),exit(&#39;1&#39;),die,return的区别
  20. javascript;先弹出提示框,再跳转到其他页面。

热门文章

  1. Java面向对象编程 第一章 面向对象开发方法概述
  2. Dubbo消费端错误: ClassNotFoundException: org.apache.zookeeper.proto.WatcherEvent
  3. PAT 1036. 跟奥巴马一起编程(15)
  4. 新书《编写可测试的JavaScript代码 》出版,感谢支持
  5. knockoutJS学习笔记05:控制文本和外观绑定
  6. C#如何防止程序多次运行的技巧
  7. php面向对象编程(三)
  8. Android Studio导入第三方jar包
  9. 用gulp打包带参数资源做法与asp.net/java项目结合的自动构建方案探讨
  10. [转]C#反射-Assembly.Load、LoadFrom与LoadFile进阶