Recently, I created a simple float-based banner with tiles which you can see here on jsfiddle. However, I encountered a major issue with centering text in each tile. My goal is to have all the "Sample text" content centered both horizontally and vertically within each tile, but so far, I haven't been successful in achieving that.
I've experimented with several methods, but none of them seem to perfectly center the text. Can anyone provide guidance on how I can achieve this?
Below, you'll find the code snippets for both the HTML and CSS files:
HTML file:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>
<body>
<div id="page-content">
<div id="banner-wrapper">
<div class="column left-col">
<div class="block block-25">
<div class="overlay"></div>
<div class="block-content">Sample text</div>
</div>
<div class="block block-24">
<div class="block-content">Sample text</div>
</div>
<div class="block block-22">
<div class="block-content">Sample text</div>
</div>
<div class="block block-21">
<div class="block-content">Sample text</div>
</div>
</div> <!--Column left END -->
<div class="column right-col">
<div class="block block-23">
<div class="block-content">Sample text</div>
</div>
</div><!--Column right END -->
</div> <!--Banner wrapper END -->
</div>
</body>
</html>
CSS file:
body {font-family: margin:0;}
#page-content {max-width: 1220px; margin: 0 auto; position:relative;}
/* banner */
#banner-wrapper {overflow:hidden; padding:0px; margin: 0px;}
.column {height:442px;float:left;}
#banner-wrapper .left-col {width: 65.5%}
#banner-wrapper .right-col {width:34.5%}
.horizontal-line-top {height:4px; background-color: #3e7213; border: 0px;}
.horizontal-line-bottom {height:4px; background-color: #609732; border: 0px;}
.block {position:relative;float:left;box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 2px solid #fff;}
.block-25 {background-color:blue;border-left: 0px;border-top:0px; width:40%; height:50%;}
.block-24 {width:60%;background-color:blue; height:50%;border-top:0px; }
.block-22 {border-bottom:0px; border-left: 0px;width:28%;;background-color:blue; height:50%;}
.block-21 {border-bottom:0px;width:72%;background-color:blue; height:50%;}
.block-23 {border-right: 0px;width:100%;background-color:blue; height:100%;border-top:0px; border-bottom:0px;}
.block-content { position: absolute;color:#fff;visibility:hidden;float:none; margin:0 auto;}
.block:hover > .overlay {float:left; width:100%;height:100%;background-color:#000;opacity:0.5;}
.block:hover .block-content {visibility:visible;}