V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dive into HTML5
http://diveintohtml5.org/
cheejay
V2EX  ›  HTML

求助各位大佬。。html 文字居中带背景还有更好的方法吗

  •  
  •   cheejay · 2017-04-08 20:53:29 +08:00 · 3785 次点击
    这是一个创建于 2770 天前的主题,其中的信息可能已经有所发展或是发生改变。

    题目要求效果图如下 我现在是这样实现的

    <style> p{ background-color: blue; font-size: 5ex; display: inline-block; margin:0 auto; width: 200px ; } </style> <body>

    我只是想居中带背景而已

    </body>
    可是我总觉得这不是最佳的方案,请问各位大佬还有什么更好的方法吗
    11 条回复    2017-04-10 19:54:08 +08:00
    wukongkong
        1
    wukongkong  
       2017-04-08 21:15:40 +08:00   ❤️ 1
    设置了宽高,不需要设置 display: inline-block;,因为已经把固定了背景的长宽。

    flex 方法,可以研究研究:
    在外面套一层,我这里直接在 body 上面写了:
    ```js
    body{
    //设置 flex 方式
    display: flex;
    //容器内对齐方式
    //垂直居中: align-items: center;
    justify-content: center;
    }

    p{
    background: #ebe4ff;
    }
    ```
    cheejay
        2
    cheejay  
    OP
       2017-04-08 21:46:41 +08:00 via Android
    @wukongkong 感谢,但是似乎老版本例如 IE10 以下都不支持这种方式……
    bdbai
        3
    bdbai  
       2017-04-08 21:57:55 +08:00 via Android   ❤️ 1
    用 display table 和 table-cell 组合居中
    wukongkong
        4
    wukongkong  
       2017-04-08 22:00:35 +08:00 via Android
    @cheejay 让他们升级浏览器 笑哭😂
    est
        5
    est  
       2017-04-08 22:01:53 +08:00   ❤️ 1
    上 table 吧。
    ferrum
        6
    ferrum  
       2017-04-08 22:07:30 +08:00   ❤️ 1
    这个就是最常见的办法了,兼容性也好。不用想其他的了。
    cheejay
        7
    cheejay  
    OP
       2017-04-08 22:22:31 +08:00 via Android   ❤️ 1
    @wukongkong @bdbai @est @ferrum
    感谢各位,我还是先这样用吧不折腾了……
    Sparetire
        8
    Sparetire  
       2017-04-09 01:35:01 +08:00
    我就奇怪只是文字居中,为什么就没有人用 text-align: center 的。。不要 display: inline-block ,只要 text-align: center 就好
    aaronlam
        9
    aaronlam  
       2017-04-09 02:04:36 +08:00
    @Sparetire 如果去掉了 display: inline-block 会不会背景就超出文字范围了?
    kfll
        10
    kfll  
       2017-04-09 11:33:39 +08:00 via Android   ❤️ 1
    @aaronlam p span hello world endspan endp
    p text-align center
    p span background blue
    IJustmaogepao
        11
    IJustmaogepao  
       2017-04-10 19:54:08 +08:00
    给你代码。。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    div {
    text-align: center;
    }
    span {
    background-color: blue;
    }
    </style>
    </head>
    <body>
    <div>
    <span>asdf</span>
    </div>
    </body>
    </html>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3655 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 10:23 · PVG 18:23 · LAX 02:23 · JFK 05:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.