Geek Answers Handbook

CSS float mosaic - text centering issue

I created a simple floating banner with the following fragments:

My code is in jsfiddle ,
but I have a big problem with centering the text in each tile. I would like all the Sample Text texts to be concentrated in each slab (horizontally and vertically), but I have no idea how to achieve this.

I tried many methods, but the text was never centered well. How can i do this?

I will also insert my code here:
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;}
+4
source share
3 answers

Try using this css. This will solve the problem.

.block-content{
position: relative; 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

. , . .

+2

! JSFIDDLE

width:100%; text-align:center;

.block:hover .block-content {
    visibility: visible;
    text-align: center;
    width: 100%;
    top: 40%;
}
+1

Wrap the text in an element spanand show it as a block element. Then you can center the element using the property transform. Check out my code:

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; width:100%; height:100%;}

.block-content span { display:block; position:relative; top:50%; transform: translateY(-50%); text-align:center }

.block:hover > .overlay {float:left; width:100%;height:100%;background-color:#000;opacity:0.5;}
.block:hover .block-content {visibility:visible;}
		<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"><span>Sample Text</span></div>
              </div>

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

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

              <div class="block block-21">
                <div class="block-content"><span>Sample Text</span></div>
              </div>
            </div> <!--Column left END -->
            <div class="column right-col">

              <div class="block block-23">
                <div class="block-content"><span>Sample Text</span></div>
              </div>
            </div><!--Column right END -->
          </div> <!--Banner wrapper END -->
    </div>
Run codeHide result
0
source

More articles:


All Articles