x5Abrahamx5
Member
- Jan 25, 2014
- 62
- 5
<div class='square-box'>
<div class='square-content'><div><span>I'm a responsive CSS square with centered content!</span></div></div>
</div>
.square-box{
position: relative;
width: 50%;
overflow: hidden;
background: #4679BD;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white
}
ThanksYou have to edit itCode:<div class='square-box'> <div class='square-content'><div><span>I'm a responsive CSS square with centered content!</span></div></div> </div>
Code:.square-box{ position: relative; width: 50%; overflow: hidden; background: #4679BD; } .square-box:before{ content: ""; display: block; padding-top: 100%; } .square-content{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: white; } .square-content div { display: table; width: 100%; height: 100%; } .square-content span { display: table-cell; text-align: center; vertical-align: middle; color: white }
Where's the file Located?You have to edit itCode:<div class='square-box'> <div class='square-content'><div><span>I'm a responsive CSS square with centered content!</span></div></div> </div>
Code:.square-box{ position: relative; width: 50%; overflow: hidden; background: #4679BD; } .square-box:before{ content: ""; display: block; padding-top: 100%; } .square-content{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: white; } .square-content div { display: table; width: 100%; height: 100%; } .square-content span { display: table-cell; text-align: center; vertical-align: middle; color: white }