无法在组件顶部添加边距

cocool97

我需要构建两个必须可单击的框,例如这些框:

我目前有这个,但是我问自己很多我可以解决的简单问题:

*

1)我的choice-box组件高度固定,是否可以相对于页面放置高度
2)我该怎么做垂直居中我Upload New FileDownload Template文本?我试图垂直对齐它们,但是它不起作用...
3)我想在Wrong move...文本上方添加一个边距,我尝试了amargin-top和a padding-top,但是它也不起作用...我认为这是因为我上面的组件(choice-boxes)设置不当,

我有点陌生css,所以如果有人可以帮助我,那很好!

这里是我htmlcss代码:

<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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章