如何水平对齐页脚中的div
[英]How to horizontally align divs in footer
问题描述
我正在尝试为自定义 Wordpress 站点创建一个页脚组件，并且在对齐页脚标记中的 3 个 div 时遇到了一些问题。 我是 HTML 和 css 的新手，并试图学习和帮助这个项目。 非常感谢您提供的任何帮助。
<body>
<style>
.dust-footer {
position: fixed;
left: 0;
bottom: 150;
height: 150;
width: 100%;
background-color: red;
color: white;
}
.mix-footer {
position: fixed;
left: 0;
bottom: 115;
height: 100;
width: 100%;
background-color: yellow;
color: gray;
}
.nav-footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color:gray;
color: white;
}
</style>
<footer>
<div class="dust-footer">
<h1>DustMasters</h1>
</div>
<div class="mix-footer">
<h1>Mix Section</h1>
</div>
<div class="nav-footer">
<h1>Navigation</h1>
</div>
1 个解决方案
解决方案1
0 2021-04-18 22:24:55
正如@Johannes 在评论中提到的， display: flex将是水平 alignment 的最佳方式。 然后，您可以根据您想要的效果相应地应用justify-content 。 更多关于 flexbox 的信息在这里。
您的原始代码中还有其他几个问题需要牢记：
- 您缺少
<footer>的结束标记：</footer> - 如果您需要偏移一定距离，则只要它不为 0，就需要单位。例如，
bottom: 150应该是bottom: 150px，如果这就是您的意思。 由于我们使用的是 flexbox，因此我删除了现有的position: fixed并应用了偏移量。
下面的代码应该可以达到你想要的效果：
<body> <style> footer { display: flex; /* added style */ justify-content: space-around; /* added style */ }.dust-footer { background-color: red; color: white; }.mix-footer { background-color: yellow; color: gray; }.nav-footer { background-color:gray; color: white; } </style> <footer> <div class="dust-footer"> <h1>DustMasters</h1> </div> <div class="mix-footer"> <h1>Mix Section</h1> </div> <div class="nav-footer"> <h1>Navigation</h1> </div> </footer>
如何水平对齐div？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.