Jump to content


Photo
- - - - -

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

CSS customization layout

Best Answer Danny , 03 December 2012 - 08:47 AM

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...al-and-vertical

http://css-tricks.co...lti-lined-text/

Go to the full post


This topic has been archived. This means that you cannot reply to this topic.
4 replies to this topic

#1 cf666

cf666

    Advanced Member

  • Members
  • 44 posts

Posted 03 December 2012 - 04:04 AM

Please take a look at 

Please Login or Register to see this Hidden Content

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...



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17945 posts

Posted 03 December 2012 - 08:47 AM   Best Answer

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.

 

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content



#3 cf666

cf666

    Advanced Member

  • Members
  • 44 posts

Posted 04 December 2012 - 12:55 AM

thanks so much, Danny!

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



#4 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 04 December 2012 - 01:26 AM

Let us know if this works for you :-)



#5 cf666

cf666

    Advanced Member

  • Members
  • 44 posts

Posted 04 December 2012 - 01:39 AM

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