htmlcsstwitter-bootstrapcontainerscenter-align

How to center align text horizontally and VERTICALLY in a box/container?

I am trying to create a web page that looks like this:

Download page

I worked with bootstrap and created rows to align three download options next to each other. I then created containers in these rows (to replicate the boxes) and center aligned the text and download icon horizontally. Unfortunately, I am not sure how to center align the text and icon vertically in a container. Can anyone help out? My current design looks like this:

Current design

My code is the following:

.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>

Edit: Thanks everyone for their answers! I really appreciate them. For me it worked by simply adjusting my content-border class with:

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

  • You don't need to complicate stuff using FlexBox. Please use something like this, a table layout or line-height and vertical-align combination:

    .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;
}
    <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>

    Preview

    preview