我在div中创建了一个,height: 300px并在其中创建了一个div,另外两个div是display: inline-block。我想做的是让div垂直对齐中心。
我已经尝试过垂直对齐div,使用了flex框(但是如果我使用wrapper,则不会真正起作用margin: 0 auto),也已经使用了line-height(问题是因为我在第二个div中有文本,因此无法解决问题。)
这是我的SCSS代码:
.p-{
&footer-class{
height: 47px;
background: transparent linear-gradient(270deg, #96A3B2 0%, #E9EDF4 100%) 0% 0% no-repeat padding-box;
@include mq('sm'){
padding: 0 25px 0 23px;
}
@include mq('xs') {
padding: 0 25px 0 23px;
}
@include mq('xl') {
// justify-content: left;
// display: flex;
// align-items: center;
height: 267px;
}
}
}
.c-{
&footer-social {
float: left;
}
}
.c-{
&footer-about {
float: right;
@include mq('xs'){
display: inline-block;
margin-top: 4px;
}
@include mq('sm'){
display: inline-block;
margin-top: 4px;
}
@include mq('md'){
display: inline-block;
}
@include mq('xl'){
display: inline-block;
}
}
&footer-text {
display: block;
color: #ffffff;
font: bold 10px/20px "Consolas";
opacity: 1;
&1 {
@include mq('xs'){
display: inline-block;
margin-top: 4px;
}
@include mq('sm'){
display: inline-block;
margin-top: 4px;
}
@include mq('md'){
display: inline-block;
}
@include mq('xl'){
display: none;
}
}
}
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。