Miloš Marković Miloš Marković - 1 month ago 10
CSS Question

Fading-in text on bottom of screen centered

I want this text to be shown on bottom middle of the screen, but it keeps showing on bottom left of the screen. What am I doing wrong?



$('div').delay(2000).fadeIn(1000);

div.hidden {
position: absolute;
bottom: 0;
display: none;
text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">
<p>This is some text.</p>
</div>




Answer Source

Add width: 100% to your css.

This causes the div to span the entire width of the screen, so when the text is centered, it is centered in the screen.