Html 水平对齐两个元素
我试图找到一种方法,在两个HR元素下完美地对齐左右部分。我希望HR元素在同一行上,因为现在看起来右部分比左部分高一点。我尝试使用align self,但它没有按照我想要的方式工作。我还有其他解决方案吗 我现在的代码:Html 水平对齐两个元素,html,css,Html,Css,我试图找到一种方法,在两个HR元素下完美地对齐左右部分。我希望HR元素在同一行上,因为现在看起来右部分比左部分高一点。我尝试使用align self,但它没有按照我想要的方式工作。我还有其他解决方案吗 我现在的代码: <footer> <div class="info"> <hr /> <info class="info__wrap"> <div class="info-el
<footer>
<div class="info">
<hr />
<info class="info__wrap">
<div class="info-el">Company</div>
<div class="info-el">Contact us</div>
<div class="info-el">Career</div>
<div class="info-el">Privacy policy</div>
<div class="info-el">Terms</div>
</info>
</div>
<div class="footer-logo">
<img src="img/logo-green-1x.png" alt="">
</div>
<div class="copyright">
<hr/>
Build by Jonas Schmedtmann for his online course advanced CSS and SASS. Copyright by Joanas Schmedtman. You are 100% allowed to use this webpage for both personal and commercial uses, but not to claim it is your design.
</div>
</footer>
footer {
background-color: $color-grey-dark-3;
display: flex;
height: 40rem;
align-items: center;
color: $color-white;
justify-content: space-around;
}
.info__wrap {
display: flex;
font-size: 70%;
}
.footer-logo {
align-self: flex-start;
padding-top: 5rem;
}
.copyright {
width: 30rem;
font-size: 0.9rem;
}
.info-el {
padding-right: 1rem;
text-transform: uppercase;
}
单位
联系我们
事业
隐私政策
条款
由Jonas Schmedtmann为其在线课程高级CSS和SASS构建。Joanas Schmedtman版权所有。您完全可以将此网页用于个人和商业用途,但不得声称它是您的设计。
页脚{
背景色:$color-gray-dark-3;
显示器:flex;
高度:40雷姆;
对齐项目:居中;
颜色:$白色;
证明内容:周围的空间;
}
.info\u包装{
显示器:flex;
字体大小:70%;
}
.页脚标志{
自我校准:灵活启动;
垫面:5rem;
}
.版权所有{
宽度:30雷姆;
字体大小:0.9rem;
}
.info el{
右侧填充:1rem;
文本转换:大写;
}
我认为您最好的选择是更改对齐项目:居中代码>指向对齐项目的指令:flex start编码>并对固定金额的项目应用填充顶部
。我个人认为像素或rem可以工作 我希望这就是你的期望:
页脚{
背景色:$color-gray-dark-3;
显示器:flex;
弯曲方向:立柱;
高度:40雷姆;
对齐项目:居中;
颜色:$白色;
}
.内容{
显示器:flex;
证明内容:之间的空间;
宽度:-webkit填充可用;
}
.info\u包装{
显示器:flex;
字体大小:70%;
}
.页脚标志{
垫面:5rem;
}
.版权所有{
宽度:30雷姆;
字体大小:0.9rem;
}
.info el{
右侧填充:1rem;
文本转换:大写;
}
单位
联系我们
事业
隐私政策
条款
由Jonas Schmedtmann为其在线课程高级CSS和SASS构建。Joanas Schmedtman版权所有。您完全可以将此网页用于个人和商业用途,但不得声称它是您的设计。
注意:
标记不使用,也不需要结束斜杠,而且在HTML中从未使用过。请查看我的答案