Antony Suthakar J: How to center text both horizontally and vertically without fixed height?

Below is the code sample for centering text content being centered both vertically and horizontally.

HTML

<body>
<div class="content">
<div class="inner-row-content">
<span class="inner-col-content">test content<br>
test content<br>
test content<br>
test content<br>
test content<br>
test content<br>
test content<br>
test content<br>
test content<br>
test content
</span>
</div>
</div>
</body>

CSS

html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
.content {
display: table;
width: 100%;
height: 100%;
}
.inner-row-content {
display: table-row;
width: 100%;
}
.inner-col-content {
display: table-cell;
vertical-align: middle;
text-align: center;
}

Antony Suthakar J

Thursday, 12 November 2015

How to center text both horizontally and vertically without fixed height?

No comments:

Post a Comment