1)我的choice-box
组件高度固定,是否可以相对于页面放置高度?
2)我该怎么做垂直居中我Upload New File
和Download Template
文本?我试图垂直对齐它们,但是它不起作用...
3)我想在Wrong move...
文本上方添加一个边距,我尝试了amargin-top
和a padding-top
,但是它也不起作用...我认为这是因为我上面的组件(choice-boxes
)设置不当,
我有点陌生css
,所以如果有人可以帮助我,那很好!
这里是我html
和css
代码:
<div className="choice-box">
<div className="head-title head-title-choice">
What are you trying to do ?
</div>
<div className="choice-boxes">
<div className="choice left-choice">
Upload New File
</div>
<div className="choice right-choice">
Download Template
</div>
</div>
<div className="under-choice">
Wrong move, get back to Dashboard
</div>
</div>
和:
.choice-box{
background-color: #FFFFFF;
margin-left: 20%;
margin-right: 20%;
margin-top: 5%;
height: 600px;
border-radius: 5px;
}
.head-title-choice{
text-align: center;
padding-top: 2%;
font-size: 25px;
}
.choice-boxes{
width: 100%;
height: 400px;
}
.choice{
float: left;
text-align: center;
background-color: blue;
margin-top: 5%;
height: 100%;
}
.left-choice{
width: 44.5%;
margin-left: 5%;
}
.right-choice{
width: 44.5%;
margin-left: 1%;
margin-right: 5%;
}
.under-choice{
text-align: center;
}
我认为没有理由在float
这里使用。尝试使用flexbox进行布局,并使用vh使高度与窗口成比例。
.choice-box {
text-align: center;
}
.choice-boxes {
display: flex;
align-items: center;
margin: 20px 0;
}
.choice-boxes>* {
flex: 1 1 auto;
background: blue;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
color: white;
}
<div class="choice-box">
<div class="head-title head-title-choice">
What are you trying to do ?
</div>
<div class="choice-boxes">
<div class="choice left-choice">
Upload New File
</div>
<div class="choice right-choice">
Download Template
</div>
</div>
<div class="under-choice">
Wrong move, get back to Dashboard
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句