Please take a look at
and tell me what I'm doing wrong, I've run out of things to try here...
I'd like the block of text on the home page to be CENTERED on the page, both vertically and horizontally, no matter how the browser window gets resized.
Someone has suggested I try
this is the HTML for that block of text:
<div class="frontpgblock">
<p class="dateblock"><span id="thursday">THURSDAY</span>
<span id="twentyeight">28</span>
<span id="march">MARCH</span>
<span id="twentythirteen">2013</span></p>
<p class="main-paragraph"><span id="anaalex">ANA & ALEX</span>
<span id="aregetting">ARE GETTING</span>
<span id="married">MARRIED</span></p>
</div>
and this is the CSS I wrote for it. What's highlighted in red is what I tried last (at someone's suggestion) but it doesn't work either:
.frontpgblock {
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -100px !important;
}
.dateblock {
align:center;
font-family:Montserrat;
float:left;
display:inline;
border-right:0.3em solid black ;
padding-right:0.7em;
}
.main-paragraph {
align:center;
padding-left:0.7em;
font-family:Montserrat;
float:left;
display:inline;
}
#thursday {
font-size:2em;
line-height:1em;
}
#twentyeight {
font-size:10em;
line-height:0.85em;
}
#march {
font-size:3em;
line-height:1em;
}
#twentythirteen {
font-size:5.2em;
line-height:0.9em;
}
#anaalex {
font-size:6.75em;
color:red;
line-height:0.75em;
}
#aregetting {
font-size:6em;
line-height:1.1em;
}
#married {
font-size:8.5em;
line-height:0.7em;
}
What do I need to do??
Thank you...
