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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

Dive into HTML5

这是一个创建于 2572 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

我只是想居中带背景而已

</body>
可是我总觉得这不是最佳的方案，请问各位大佬还有什么更好的方法吗

div

style

居中

body

11 条回复 • 2017-04-10 19:54:08 +08:00

wukongkong

2017-04-08 21:15:40 +08:00

设置了宽高，不需要设置 display: inline-block;，因为已经把固定了背景的长宽。

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

p{
background: #ebe4ff;
}
```

cheejay

2017-04-08 21:46:41 +08:00 via Android

@wukongkong 感谢，但是似乎老版本例如 IE10 以下都不支持这种方式……

bdbai

2017-04-08 21:57:55 +08:00 via Android

用 display table 和 table-cell 组合居中

wukongkong

2017-04-08 22:00:35 +08:00 via Android

@cheejay 让他们升级浏览器笑哭😂

est

2017-04-08 22:01:53 +08:00

上 table 吧。

ferrum

2017-04-08 22:07:30 +08:00

这个就是最常见的办法了，兼容性也好。不用想其他的了。

cheejay

2017-04-08 22:22:31 +08:00 via Android

@wukongkong @bdbai @est @ferrum
感谢各位，我还是先这样用吧不折腾了……

Sparetire

2017-04-09 01:35:01 +08:00

我就奇怪只是文字居中，为什么就没有人用 text-align: center 的。。不要 display: inline-block ，只要 text-align: center 就好

aaronlam

2017-04-09 02:04:36 +08:00

@Sparetire 如果去掉了 display: inline-block 会不会背景就超出文字范围了？

kfll

2017-04-09 11:33:39 +08:00 via Android

@aaronlam p span hello world endspan endp
p text-align center
p span background blue

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>