专栏首页九彩拼盘的叨叨叨元素的水平居中的方法

元素的水平居中的方法

元素内的行内元素

在元素上加

text-align:center;

宽度固定的块级元素

在元素上加

width: 宽度值;
margin-left: auto;
margin-right: auto;

或者用绝对定位

position: absolute;
width: 宽度值;
left: 50%;
margin-left: -(宽度值/2);

宽度不固定的块级元素

方法1

display:inline-block。通过以下几个步骤

  1. 元素设置text-align:center;
  2. 元素设置font-size:0;。这样做是为了去除子元素间的空格的占位
  3. 子元素设置display:inline-block;

方法2

需要通过以下几个步骤

  1. 让元素的宽度变为所包含元素的内容。可以用浮动或绝对定位。
  2. 元素向左移动其父级元素宽度的50%
  3. 子元素向左移动其父级元素宽度的50%

例如,有如下的HTML结构

<ul id="no-sure-width-2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

样式为

#no-sure-width-2 {
    list-style: none;
    position: absolute;
    left: 50%;
    /* 用下面的两个样式 和使用 position: absolute;是等效的。本质上都是让元素的宽度变为所包含元素的宽度 */
    /*float:left;
    position: relative;*/

}

#no-sure-width-2>li {
    float: left;
    position: relative;
    left: -50%;
    /*right: 50%;*/ /*left -50%和right 50% 是等价的*/
    /*将每个分页项向左移动父元素宽度的50%*/
    background-color: #ddd;
    color: #fff;
    width: 20px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}

总结

上面介绍的方法都是浏览器兼容性比较好的。兼容IE8+,Chrome,Firefox等。

还可以使用CSS3的flexbox,transform等方式来实现水平居中。但使用这些CSS3特性来做居中时,要注意下兼容性。

详细描述和更多实现见六种实现元素水平居中

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端学习 第3周 第1天

    Joel
  • 学习纲要:常用样式

    ps: 学习目标看着很少,但学习目标的第一点有很多要学的。目前写的比较粗,以后我会细化。

    Joel
  • CanIUse 命令行工具介绍

    注意:如果使用的是Windows系统,需要在Git的命令行执行上述命令。否则会报Git Not Found的错。

    Joel
  • Java基础——集合框架

      Java的集合框架是Java中很重要的一环,Java平台提供了一个全新的集合框架。“集合框架”主要由一组用来操作对象的接口组成。不同接口描述一组不同数据类型...

    mukekeheart
  • 实战篇 | 用Xpath,bs4,正则三种方式爬51job

    最近整理一个爬虫系列方面的文章,不管大家的基础如何,我从头开始整一个爬虫系列方面的文章,让大家循序渐进的学习爬虫,小白也没有学习障碍.

    叫我龙总
  • Java jar包运行方式

    特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出

    Little JAVA
  • Python进阶:全面解读高级特性之切片!

    导读:切片系列文章连续写了三篇,本文是对它们做的汇总。为什么要把序列文章合并呢?在此说明一下,本文绝不是简单地将它们做了合并,主要是修正了一些严重的错误(如自定...

    Python猫
  • 深度学习实战 numpy生成实数序列

    在利用python在进行数据分析的时候,经常需要按照某种规则快速生成实数序列,尤其是在学习matplotlib绘图的时候,需要模拟生成数据,然后开始绘制。

    算法与编程之美
  • Python基础 | 你想要的随机数生成都在这里

    在利用Python在进行数据分析的时候,经常需要按照某种规则快速生成实数序列,尤其是在学习matplotlib绘图的时候,需要模拟生成数据,然后开始绘制。

    算法与编程之美
  • 详述使用 IntelliJ IDEA 解决 jar 包冲突的问题

    在实际的 Maven 项目开发中,由于项目引入的依赖过多,遇到 jar 冲突算是一个很常见的问题了。在本文中,我们就一起来看看,如何使用 IntelliJ ID...

    CG国斌

扫码关注云+社区

领取腾讯云代金券