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

2017-04-08 20:53:29 +08:00
 cheejay

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

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

我只是想居中带背景而已

</body>
可是我总觉得这不是最佳的方案，请问各位大佬还有什么更好的方法吗
3633 次点击
所在节点    HTML
11 条回复
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
@wukongkong 感谢，但是似乎老版本例如 IE10 以下都不支持这种方式……
bdbai
2017-04-08 21:57:55 +08:00
用 display table 和 table-cell 组合居中
wukongkong
2017-04-08 22:00:35 +08:00
@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
@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
@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>

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/353485

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX