After some testing, I have come up with the following code:
.Greetings {
width:100%;
display:block;
text-align:center;
font-family: "Times New Roman", Times, serif;
font-size:75px;
color:#208CB7;
}
The objective was to center the text on the screen, however, it stubbornly remains in the top left corner. The CSS works perfectly fine in changing the color and size of the text, but unfortunately, the positioning is not responding as expected.
In addition, the text is dynamically generated using this script:
function Greetings() {
var currentTime = new Date();
var hour = currentTime.getHours();
if(hour >= 22 || hour < 7) {
document.write('<span class="Greetings">Good Night</span>');
} else if (hour > 7 && hour <= 14){
document.write('<span class="Greetings">Good Morning</span>');
} else {
document.write('<span class="Greetings">Good Afternoon</span>');
}
}
The HTML structure involves calling the above-mentioned script to create the span element:
<div id="Greetings">
<script type="text/javascript" src="js/default.js"></script>
</div>