text not getting vertically centered - html

Question

I am trying to create clickable tiles (box shaped) on dashboard.
Problem 1: I tried using flexbox but vertical alignment didnt work for me. so I tried using padding-top. What I am looking for is that the tiles should have vertically centered icons and text which should also be maintained responsively (Bootstrap Used).
div.wrapper{
height:150px;
padding:20px;
padding-top:30%;
border:1px solid black;
margin:auto;
text-align:center
}
Using padding-top doesnot work responsively. On decreasing the screen width, text and icon comes out of the tile. Using line-height equal to box height makes multiline text go way out of the tile.
Problem 2: for making full tile clickable, I tried using display:block on my anchor tag when it was inside the div
<div class="col-md-2 button-col">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Manage Items
</div>
</div>
css:
a.mybutton{
font-weight:bold;
text-decoration:none;
font-family:Arial;
display: block;
}
but full tile didnot become clickable. So I placed anchor tag outside the div.
Here is my present layout:
<div class="container">
<div class="row">
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Click for Production Calculation Chart
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Production Calculation Chart
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Tile Number 3
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
This is Tile 4
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Tile 5
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Tile 6 Text
</div>
</a>
</div>
<!-- And Many More Tiles Will Come and make more rows -->
</div>
</div>
Here is my current css:
div.button-col{
padding:2rem;
}
div.wrapper{
height:150px;
padding:20px;
border:1px solid black;
margin:auto;
text-align:center
}
div.wrapper:hover{
background-color:blue;
cursor: pointer
}
div.wrapper i.fa{
color:#438EB9;
}
div.wrapper:hover i.fa {
color:white;
}
a.mybutton{
font-weight:bold;
text-decoration:none;
font-family:Arial;
}
a.mybutton:hover
{
color:white;
}

Answer 1

Finally a solution that worked perfect for me. Please suggest if this is the best solution? or we can do something better
.button-col{
display: table;
width: 100%;
height: 150px; /* for demo only */
border: 1px solid black;
margin-bottom:20px;
}
.centeralign{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.contentouter{
width:100%;
height:100%;
display: inline-block;
vertical-align: top;
}
div.button-col:hover, div.button-col:hover a{
background-color:blue;
color:white;
}
.icon{
margin-top:30px;
margin-bottom:10px;
}
.content
{
display: table;
width: 100%;
height: 70px;
}
.contentinner{
display: table-cell;
text-align: center;
vertical-align: middle;
}
a.my-button
{
font-weight:bold;
text-decoration:none;
}
HTML:
<div class="col col-sm-2 button-wrapper">
<a href="my_url" class="my-button">
<div class="button-col">
<div class="centeralign">
<div class="contentouter">
<div class="icon">
<i class="fa fa-gear fa-2x"></i>
</div>
<div class="content">
<div class="contentinner">
Items
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col col-sm-2 button-wrapper">
<a href="my_url" class="my-button">
<div class="button-col">
<div class="centeralign">
<div class="contentouter">
<div class="icon">
<i class="fa fa-gear fa-2x"></i>
</div>
<div class="content">
<div class="contentinner">
Click for Production Calculation Chart
</div>
</div>
</div>
</div>
</div>
</a>
</div>

Answer 2

Answer to Problem 1:
Try setting the style to the link 'a' element and removing manual positioning and user vertical-align property instead:
div.wrapper{
border: 1px solid black;
padding: 10px;
text-align: center;
}
div.wrapper a{
display: inline-block;
vertical-align: middle;
}
I've also removed the <br> from the HTML:
<div class="col-md-2 button-col">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
Manage Items
</div>
</div>
If you still want a <i> and <a> each to set in their own lines then wrap <i> with <div> and it should get vertically and horizontally centred.
Notice that a proper display type like inline-block is required to get vertical center working.
See it in action https://jsfiddle.net/74wg2za6/
Answer to Problem 2
To get the whole tile clickable simply wrap your whole wrapper div with <a> instead of making text "Manage Items" only clickable, see it here
https://jsfiddle.net/kr45qoa1/
I just leveraged the <a> tag up to wrap all <div>, <i> and text.
Hope this is what you are looking for.

Answer 3

Can you try that :
<!DOCTYPE html>
<html>
<head>
<script src='js/fontawesome-all.min.js'></script>
<style>
div.button-col{
height:150px;
line-height: 150px;
width: 100%;
margin: 20px auto;
text-align:center;
}
a.mybutton{
width: 90%;
display:inline-block;
padding: 20px;
line-height: 20px;
border:1px solid black;
font-weight:bold;
text-decoration:none;
cursor: pointer;
}
a.mybutton:hover {
background-color:blue;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2 button-col">
<a href="my_url" class="mybutton">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Click for Production Calculation Chart
</a>
</div>
</div>
</div>
</body>
</html>