首页 > 代码库 > 水平居中
水平居中
方案一
| 位置 | 属性名 | 值 | 意义 |
| 父div | text-align | center | 让子元素居中 |
| 子div | display | inline-block | 可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。 |
| 子div | text-align | left | 让子元素中的文字不继承父div 的 text-align:center属性, 设置为默认的text-align:left |
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>水平居中--方案一</title> <style type="text/css"> /*优点：兼容IE低版本浏览器*/ .parent{ text-align: center; } .child{display: inline-block; text-align: left;} </style></head><body> <div class="parent" style="width: 400px;height: 100px;background: red;"> <div class="child" style="width: 80px;height: 100px;background: green;"> <h1>DEMO</h1> </div> </div></body></html>
方案二
| 位置 | 属性名 | 值 | 意义 |
水平居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。