<div class="container align-center">
<div class="row ">
<div classs="content-div">
<div class="content vertical-center align-center">
You can see thi text aligned vertically and horizontally;
</div>
</div>
</div>
</div>
<style>
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
max-width:960px;
margin:100px auto;
}
.content-div {
float:left;
width:250px;
height:250px;
text-align:center;
padding:20px;
margin:0 10px 10px;
position:relative;
}
.row {display:inline-block;}
.align-center {text-align:center;}
.vertical-center {
display: block;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.content {
font-size:18px;
color:#fff;
line-height:1.2;
}
</style>
Center the content including text and images in a div both horizontally and vertically
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.