Archived

This topic is now archived and is closed to further replies.

  • 0

Can't Center Styled Text Block On Page...


Question

Posted · Report post

Please take a look at http://carinafeldman.com/ana/ 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 &amp; 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...

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

Hi,

 

I think the issue is your HTML is not structured correctly to do this type of layout. I recommend you view these two links for assistance and amend your HTML.

 

I wouldn't use the <p> tag, this then requires a negative margin and floats.

 

http://stackoverflow.com/questions/8187275/css-center-text-both-horizontal-and-vertical

http://css-tricks.com/vertically-center-multi-lined-text/

Share this post


Link to post
Share on other sites

Posted · Report post

thanks so much, Danny!

I'll check it out and see if my pea-sized brain can wrap itself around this!

Share this post


Link to post
Share on other sites

Posted · Report post

Let us know if this works for you :-)

Share this post


Link to post
Share on other sites

Posted · Report post

will do, as soon as I have a free moment to sit down with it, thanks so much!!

Share this post


Link to post
Share on other sites