如何在框/容器中将文本水平和垂直居中对齐？

Question

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:

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 */
}

Answer 1

I would use a flexbox for the container-border class. In that case you can remove the floats.

 .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

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

Answer 3

add display: flex;align-items: center; to .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

Why not just set a padding:

.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*/
}

Demo:

 .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*/ } 

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