题目要求效果图如下 我现在是这样实现的
<style> p{ background-color: blue; font-size: 5ex; display: inline-block; margin:0 auto; width: 200px ; } </style> <body>我只是想居中带背景而已
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; } ``` |
2
cheejay OP @wukongkong 感谢,但是似乎老版本例如 IE10 以下都不支持这种方式……
|
3
bdbai 2017-04-08 21:57:55 +08:00 via Android 1
用 display table 和 table-cell 组合居中
|
4
wukongkong 2017-04-08 22:00:35 +08:00 via Android
@cheejay 让他们升级浏览器 笑哭😂
|
5
est 2017-04-08 22:01:53 +08:00 1
上 table 吧。
|
6
ferrum 2017-04-08 22:07:30 +08:00 1
这个就是最常见的办法了,兼容性也好。不用想其他的了。
|
7
cheejay OP |
8
Sparetire 2017-04-09 01:35:01 +08:00
我就奇怪只是文字居中,为什么就没有人用 text-align: center 的。。不要 display: inline-block ,只要 text-align: center 就好
|
10
kfll 2017-04-09 11:33:39 +08:00 via Android 1
|
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> |