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


  • Please log in to reply
4 replies to this topic

#1 cf666

cf666

    Advanced Member

  • Members
  • 44 posts
  • LocationLos Angeles, CA
  • Country: Country Flag

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
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

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
  • LocationLos Angeles, CA
  • Country: Country Flag

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
  • LocationSurrey - UK
  • Country: Country Flag

Posted 04 December 2012 - 01:26 AM

Let us know if this works for you :-)



#5 cf666

cf666

    Advanced Member

  • Members
  • 44 posts
  • LocationLos Angeles, CA
  • Country: Country Flag

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







Also tagged with one or more of these keywords: CSS, customization, layout