如何将文本水平对齐并垂直对齐框/容器？

Question

我正在尝试创建一个如下所示的网页：

Download page

我使用bootstrap并创建行以将三个下载选项对齐。然后我在这些行中创建了容器（以复制框）并将文本和中心水平居中对齐。不幸的是，我不确定如何在容器中垂直居中对齐文本和图标。任何人都可以帮忙吗？我目前的设计如下：

我的代码如下：

.download {
  font: Verdana, Helvetica, Arial, sans-serif;
  color: RGB(112, 112, 112);
  font-size: 18px;
  text-align: center;
  padding: 5px;
}

.download:hover {
  color: rgb(227, 111, 30);
  cursor: pointer;
}

#download-icon {
  font-size: 80px;
  float: left;
}

.container-border {
  border-style: solid;
  border-color: rgb(0, 143, 197);
  padding: 5px;
  min-height: 120px;
}

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="container-border">
        <i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
        <p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
      </div>
    </div>
  </div>
</div>

编辑：感谢大家的回答！我真的很感激他们。对我而言，只需通过以下方式调整我的内容边界类：

.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
display: flex;
align-items: center;
/* vertical center */
}

Answer 1

我会为flexbox课程使用container-border。在这种情况下，您可以删除浮动。

.download {
  font: Verdana, Helvetica, Arial, sans-serif;
  color: RGB(112, 112, 112);
  font-size: 18px;
  padding: 5px;
  text-align: center;
}

.download:hover {
  color: rgb(227, 111, 30);
  cursor: pointer;
}

#download-icon {
  font-size: 80px;
}

.container-border {
  border-style: solid;
  border-color: rgb(0, 143, 197);
  padding: 5px;
  min-height: 120px;
  display: flex;
  align-items: center;
  /* vertical center */
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="container-border">
        <i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
        <p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
      </div>
    </div>
  </div>
</div>

Answer 2

您不需要使用FlexBox复杂化内容。请使用以下内容，表格布局或line-height和vertical-align组合：

＆＃13;

＆＃13;

.download {
  font: Verdana, Helvetica, Arial, sans-serif;
  color: RGB(112, 112, 112);
  font-size: 18px;
  text-align: center;
  padding: 5px;
}

.download:hover {
  color: rgb(227, 111, 30);
  cursor: pointer;
}

#download-icon {
  font-size: 80px;
  vertical-align: middle;
  line-height: 120px;
}

#download-icon + span {
  vertical-align: middle;
  line-height: 1;
}

.container-border {
  border-style: solid;
  border-color: rgb(0, 143, 197);
  padding: 5px;
  min-height: 120px;
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="container-border">
        <i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
        <span class="download"> Download list of charities that have <b> not submitted </b> data yet </span>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

预览

Answer 3

将display: flex;align-items: center;添加到.container-border

.container-border{
 border-style:solid;
 border-color: rgb(0,143,197);
 padding: 5px;
 min-height:120px;
    display: flex;
    align-items: center;
 }

Answer 4

为什么不设置填充：

.download {
    font: Verdana,Helvetica,Arial,sans-serif;
    color: RGB(112,112,112);
    font-size:18px;
    text-align:center;
    /* padding: 5px; <- removed */
    padding: 12px 5px 5px 5px; /* New */
}

#download-icon {
    font-size:80px;
    float:left;
    padding-top: 10px; /* New */
}

.container-border {
    border-style:solid;
    border-color: rgb(0,143,197);
    padding: 5px;
    min-height:120px;
    width: 300px; /* New*/
}

演示：

＆＃13;

＆＃13;

.download {
    font: Verdana,Helvetica,Arial,sans-serif;
    color: RGB(112,112,112);
    font-size:18px;
    text-align:center;
    /* padding: 5px; <- removed */
    padding: 12px 5px 5px 5px; /* New */
}

.download:hover {
    color: rgb(227,111,30);
    cursor: pointer;
}

#download-icon {
    font-size:80px;
    float:left;
    padding-top: 10px; /* New */
}

.container-border {
    border-style:solid;
    border-color: rgb(0,143,197);
    padding: 5px;
    min-height:120px;
    width: 300px; /* New*/
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <div class="container-border">
                <i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
                <p class="download"> Download list of charities that have <b> not submitted                 </b> data yet </p>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;