html怎么使用css居中(HTML+CSS实现单列布局水平居中布局)
类别:Web前端 浏览量:2024
时间:2022-03-30 00:24:54 html怎么使用css居中
HTML+CSS实现单列布局水平居中布局水平居中布局
- 父元素text-align:center;子元素:inline-block;
- 优点:兼容性好;
- 不足:需要同时设置子元素和父元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平居中布局</title> <style> *{ margin: 0; padding: 0; } .parent { width: 100%; background: green; text-align: center; } .child { display: inline-block; width: 800px; height: 100px; background: blue; } </style> </head> <body> <li class="parent"> <li class="child">1</li> <li class="child">2</li> <li class="child">3</li> <li class="child">4</li> <li class="child">5</li> <li class="child">6</li> </li> </body> </html>
总结
以上所述是小编给大家介绍的HTML+CSS实现单列布局水平居中布局,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
热门推荐
- SQLServer2019安装教程图文详解(SQLServer2019安装教程图文详解)
- thinkphp源码上传(ThinkPHP框架实现FTP图片上传功能示例)
- MySQL执行事务的语法与流程详解(MySQL执行事务的语法与流程详解)
- 内网nginx配置https详解(Nginx如何配置Http、Https、WS、WSS的方法步骤)
- 删除有外键约束的数据
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- 修改mysql安装服务名称(Apache为mysql以及自己的项目设置虚拟路径)
- mysql 分片键规则(MySql8 WITH RECURSIVE递归查询父子集的方法)
- css中好看的渐变颜色代码(CSS Tips:段落每行渐变色文本效果的实现方法)
- 如何修改serv-u主页信息(Serv-U FTP与AD完美集成方案详解)