专栏首页coding for loveCSS常用布局实现01-水平居中

CSS常用布局实现01-水平居中

1. 简介

居中是我们平常遇到的很常见的一种布局方式,主要分为水平居中,垂直居中,水平垂直居中。每种情况又分为,已知宽度,不知宽度,对块级元素居中,对行内替换元素水平居中,对行内非替换元素水平居中等等。本来我按照这个分类写好了一篇文章,但是觉得太偏理论分类,不好理解。于是我换个角度重新来写,从需求的角度来分析。那就是什么时候我们需要水平居中。

2. 文本水平居中

这应该是最常见的需求了。如何让文本实现水平居中呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-know-width</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            background: gray;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="wrap">
    一段文本
</div>
</body>
</html>

你一定会想到使用text-align即可。结果如下所示:

但是我们此时无法选中这段文本进行操作,比如为它设置背景。其实此处文本被视作匿名行内元素来处理。(可以看CSS进阶02-盒模型进阶)。那我们试着用一个实际的行内级元素将其包裹。如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-know-width</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            background: gray;
            text-align: center;
        }
        span {
            background: blue;
        }
    </style>
</head>
<body>
<div class="wrap">
    <span>一段文本</span>
</div>
</body>
</html>

也是水平居中。

好的,看起来很完美,行内非替换元素设置text-align: center即可。但如果我们所想要的并不只是文本呢?比如,在这个行内元素内部在放一个其他的元素呢? 答案是,除了放置文本和包含文本的行内级元素,其余情况都不行。 因为非替换行内级元素无法设置宽高,而且text-align: center设置的效果是文本居中。 所以这种方法非常简单,但只适用于有限的情况。

2. 图片居中

这应该也算是一个很常见的场景。看下面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-replace</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            background: gray;
            text-align: center;
        }
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="wrap" style="font-size: 0;">
    <img src="icon.jpg" alt="">
</div>
</body>
</html>

可以看到同样可以使用text-align来居中,记得设置"font-size: 0;"。这种方法也可以用于其他行内替换元素,比如input等。

3. 包含有非行内元素的元素居中

前面包含的文本和图片都是行内元素,假设现在包含有一个块级元素比如div,如何让他居中呢?这也是一个很常见的场景,一个可以包含各种内容的区域在外部区域中间。 方法1:最常见的做法就是使用margin,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>block-know-width</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            background: gray;
            height: 100px;
            width: 100%;
        }
        .inner {
            background: blue;
            width: 200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div class="wrap">
    <div class="inner">inner content</div>
</div>
</body>
</html>

这种方法可以轻易实现水平居中效果,但是有个缺点,那就是必须为inner设置宽度,因为div默认是占据整行的。

方法2:利用inline-block。 我们前面说到非替换行内级元素无法设置宽高,那么如果是使用行内块元素呢?对外利用行内布局特性居中,对内依然向块级元素一样表现。此时里面可以放置各种类型的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-know-width</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            background: gray;
            text-align: center;
        }
        .inner {
            display: inline-block;
            background: blue;
        }
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="wrap" style="font-size: 0;">
    <span class="inner">
        <img class="content" src="icon.jpg">
    </span>
</div>
</body>
</html>

可以看到,设想正确,但是同样要注意,需要设置"font-size: 0;"防止html的空格产生的间隙。

使用这种方法有个副作用,就是内部文本也会居中,可以为内部元素设置text-align:left来消除这种副作用。

第三种方法:flex,也是最应该使用的方法。目前的兼容性已经很不错了,而且会越来越好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style>
        .wrap {
            display: flex;
            justify-content: center;
            background: gray;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div style="background: blue">inner content</div>
</div>
</body>
</html>

你甚至不需要为子元素设置额外的css属性。

第四种方法: grid。和flex其实是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid</title>
    <style>
        .wrap {
            display: grid;
            justify-content: center;
            background: gray;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div style="background: blue">inner content</div>
</div>
</body>
</html>

4. 其他

其实主要就是以上三种场景,至于其他场景和实现方法我们会在水平垂直居中的文章中讨论。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS常用布局实现02-垂直居中

    css2.1本身没有提供垂直居中的属性,都是通过一些巧妙的方法来实现,当然,都会有或多或少的缺点。所以,还是那句话,如果不考虑兼容到特定的浏览器,建议使用fle...

    love丁酥酥
  • 3-5 使用plugins让打包更便捷

    loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。简言之,我们利用 lo...

    love丁酥酥
  • CSS入门1-认识html之标签

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • 如何解决ajax跨域问题

    由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的...

    MonroeCode
  • 【LeetCode题解---003】Longest Substring Without Repeating Characters

    Given a string, find the length of the longest substring without repeating chara...

    周三不加班
  • 如何使用Python连接ldap

    好多使用ldap认证的软件都是Python的,比如superset和airflow, 好吧,他们都是airbnb家的。在配置ldap的时候可能会出现认证失败,你...

    Ryan-Miao
  • SQLite在C#中的安装与操作

    先说说优点,它占用资源非常的低,在嵌入式设备中需要几百K的内存就够了;作为轻量级数据库,他的处理速度也足够快;支持的的容量级别为T级;独立: 没有额外依赖;开源...

    zls365
  • 用R语言进行Cox回归生存分析

    在生存分析中,探究生存时间的影响因素是一个重要的研究内容,通过KM和log-rank test检验的方法,只能够处理单个二分类因素的生存数据。当想探究多个因素或...

    生信修炼手册
  • 2018十大网络用语,你用过几个?

    事情出现了意想不到的转折,我们可以用来突出它很调皮,常用于微博上具有反转性的搞笑内容

    加米谷大数据
  • 人工智能“鉴黄师”

    最近,雅虎利用分类神经网络搭建了一套可以辨别Not Suitable for Work(上班不宜,以下简称NSFW)色情图片的Caffe模型,并将源码搬上了gi...

    顶级程序员

扫码关注云+社区

领取腾讯云代金券