SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Posts
    332
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center text within division

    For my css 'print' media type, only.

    How can I center various text documents, so that the text will always have equal margins. These will be poetry and prose documents, often with short lines.

    I need to make a template so that the documents with short lines of text, will have equal margins yet be left-
    aligned.

    I can only envision this being accomplished with javascript and am concerned about accessibility.

    Thanks,

    Andy

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That doesn't sound very feasible or useful.

    Do you have an example of what you mean.?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    How can I center various text documents,
    I'm not sure what you mean by documents exactly but you can centre elements in the normal way (see faq on centring) although it usually means that they will to have a width applied. This may look a little odd if you have blocks of different widths.

    There are methods for centring elements of unknown width but that would require the text to never extend to full width otherwise the width becomes 100% anyway.

    Surely for a printed page a left aligned layout is probably best.

    Or perhaps I'm missing the point

  4. #4
    SitePoint Addict
    Join Date
    Apr 2003
    Posts
    332
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Code:
    	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 	"http://www.w3.org/TR/html4/loose.dtd">
    <html lang="eng">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <title>PrintTestReflections </title>
    <style type="text/css">
    <!--
    div#container{
    	width:6.5in; margin:auto;
    	}
    
    div#printhead	{
    	font: 16pt Verdana, sans-serif;
    	color: #999;
    	background:#fff;
    	text-align:center;
    	}
    
    #centercol {	
    	padding:0em;        
    	line-height: 1.5em;
    	width:6.5in;
    	margin-left:  auto;
    	margin-right:  auto;	
    	border: 1px solid black;
    	}
    #centercol h1{
    	font: 800 16pt  "Times New Roman", serif;
    	text-align:center;
    	}
    #centercol p{
    	font: 600 14pt "Times New Roman", serif;
    	text-align:left;
    	}
    
    
    -->
    </style>
    </head>
    <body>
    <div id="container">
    
    <div id="printhead">Central Association of Northwestern PA
    </div><!--end div printhead-->
    
    <div id="centercol">
    <a name="article"></a>
    <h1>Reflections(1)</h1> 
    
     <p>   
    I never understood your feelings about me.<br /> 
    I know you were never satisfied with me.<br /> 
    Didnít seem that I could ever do anything to please you.<br />
    </p><p>
    I donít think you ever knew how much I hurt.<br />  
    How much I wanted your approval,<br /> 
    your love.<br />
     </p><p>
    You were never able to give me what I felt I needed inside.<br />  
    I never felt worthy around you.<br />  
    So little self worth.<br />
     </p><p>
    I would medicate myself so I wouldnít feel how I always seemed to  feel.<br />  
    To cover my feelings of inadequacy, worthlessness and anger.<br />  
    It seemed so much easier that way.<br />
     </p><p>
    When  I was with you when you passed on, I was so angry at you.<br />  
    The only feeling I could identify at that time was anger, Dad .<br />  
    Why couldnít you love me?<br />
    </p><p>
    I am moving on and working through my feelings about my life with you.<br />  
    Today I can sayÖI forgive you dad.<br /> 
    Iíve had to so I can move on towards where I want to be.<br />
    </p><p>
     
    Today I feel good.
    </p>
    
    <p><cite>Written by, Anonymous</cite></p>
    
    </div><!-- end div centercol -->
    <div id="footer">
    <hr><p class="copy">&copy;2007 Central Association of Western Pennsylvania</p>
    </div><!--end div footer"-->
    </div><!-- end div container -->
    </body>
    </html>
    This is one of many poems I am converting from an old format to a new format.

    The lengths vary greatly.

    I was hoping to be able to center the 'print' media type. Those documents with lots of text are not a problem but those with only short lines of text would benefit from being 'centered' in the print media type.

    Thanks for the look.

    Andy

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think the only thing you can do is to set a width for printing only and use margin:auto to have it centred.

    Looking at that example one line of text stretches form one side of the page and only stops 30px short of the other. So if you were to centre that then it would only have 15px on either side anyway.

    If you set a width for print only then at least the whole block could be centred but long lines will just wrap.

    Perhaps if you has an example of what you wanted it to look like I might help better as at the moment I'm struggling with the logic a bit

    If it was just one poem per page then you could easily find the width and use auto margins to center it.

  6. #6
    SitePoint Addict
    Join Date
    Apr 2003
    Posts
    332
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you are right, Paul. I will do it that way.

    Thanks, again.

    Andy

  7. #7
    SitePoint Addict
    Join Date
    Apr 2003
    Posts
    332
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,
    If it was just one poem per page then you could easily find the width and use auto margins to center it.
    Paul,

    Your method worked out well. Thanks, again.

    Andy


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •