如何解决为什么页脚内的2个div分别位于不同的角落?
在为学校任务做页脚时,我遇到了这个问题:两种文本都应该在同一行上,但是其中一条要高一点,而另一条要低一点
我试图在页脚的左侧放置一个链接,而在右侧放置一些文本。出于某种原因,当我将div划分为它们的位置时,它们最终会像这样。链接位于左上角,文本位于右下角。我正在尝试使它们都垂直居中,但我什么也没让它们都在那里。 我已经设法使两个人都处于中心地位,但从来没有一次同时出现。这是怎么回事?
这是我的html:
<footer>
<div class="link_class">
<a href="./" class="link_class">asd</a>
</div>
<div class="copy_class">
<p>© dsa</p>
</div>
</footer>
这是CSS:
footer{
width: 20%;
height: 5%;
background-color: gray;
display: flex;
justify-content: space-between;
}
解决方法
如果您希望它们位于单独的行上,则
align-items: center;
flex-direction: column;
并忽略justify-content
在您的示例中,原因不是弹性行为。
本机浏览器样式将边距应用于'p'标签(margin-block-start:1em; margin-block-end:1em;),而不应用于'a'标签。 要解决此问题,您有一些简单的选择:
- 将保证金:0应用于您的“ p”
- 使用另一个没有默认边距的p标记来更改p标记。
以下是默认浏览器样式的参考: https://www.w3schools.com/cssref/css_default_values.asp
,只需添加它,即可使用flexbox的神奇力量将它们彼此对齐。
align-items: center;
footer{
width: 20%;
height: 5%;
background-color: gray;
display: flex;
align-items: center;
}
<footer>
<div class="link_class">
<a href="./" class="link_class">asd</a>
</div>
<div class="copy_class">
<p>© dsa</p>
</div>
</footer>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。