The Cataylyst The Cataylyst - 2 years ago 133
HTML Question

CSS float mosaic - issue with text centering

I have created simple float based banner with tiles like this:

My code on jsfiddle,

but I have a big problem with centering text in each tile. I would like to have all "Sample text" texts centered in each tile (horizontally and vertically) but I have no idea how to achieve that..

I have tried many methods but text is never centered well. How can I do that?

I will also paste my code here:

HTML file

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

<div id="page-content">
<div id="banner-wrapper">
<div class="collumn left-col">

<div class="block block-25">
<div class="overlay"></div>
<div class="block-content">Sample text</div>

<div class="block block-24">
<div class="block-content">Sample text</div>

<div class="block block-22">
<div class="block-content">Sample text</div>

<div class="block block-21">
<div class="block-content">Sample text</div>
</div> <!--Collumn left END -->
<div class="collumn right-col">

<div class="block block-23">
<div class="block-content">Sample text</div>
</div><!--Collumn right END -->
</div> <!--Banner wrapper END -->

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

Answer Source

Try using this css. This will solve the problem.

position: relative; 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);

I tried it putting inline. If you are putting it in the external sheet then watch for contradictions. This is working well.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download