www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 25

Thread: Help Please -- How To Center A Block Of Text (Maintaining Flush Left)

Hybrid View

  1. #1
    Join Date
    Feb 2014
    Posts
    16

    Help Please -- How To Center A Block Of Text (Maintaining Flush Left)

    As simple as it seems; as much as I've copied codes from numerous sites (including the W3 site), I can't get it done.

    Of course I can simply highlight and the click the graphic up top (another website), but then every line is centered, which is unacceptable.

    I need the block(s) of text centered, FLUSH LEFT.

    Then I'll be happy.

  2. #2
    Join Date
    Feb 2014
    Posts
    16
    Whoops, I'm sorry. I just noticed not to start with "Help!"

    I tried to edit.

    Again, I apologize.

  3. #3
    Join Date
    Feb 2014
    Posts
    16
    Maybe I used a confusing word, which I'll now change.

    "I need the block(s) of text centered, FLUSH LEFT."

    Instead: I need the block(s) of text centered, ALIGNED LEFT.

    In other words, a block of text centered on the page; the text within the block aligned to the left, just like it was before being centered.

    The code would be much appreciated.

  4. #4
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    I'm not sure what you currently have since there's no code to view but it's a matter of getting the CSS (and JavaScript if there is any) to properly style the text. Below is a simple demo. By default, text is written from top to bottom, left to right, so if you want it aligned to the left, just change the CSS styling for d1.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<style>	
    			#d1
    			{
    				float: right;
    			}
    			
    			div
    			{
    				margin: 0px;
    				padding: 0px;
    			}
    			
    			.text
    			{
    				<!-- in case you want to style the text in some way -->
    			}
    			
    			#d2
    			{
    				clear: both;
    			}
    		</style>
    	</head>
    	<body>
    		<div id = "d2">
    			<p class = "text">Text to the right</p>
    		</div>
    		<div id = "d3">
    			<p class = "text">Cleared div</p>
    		</div>
    	</body>
    </html>
    If this isn't doing what you want, can you show what you've tried or give an example.

  5. #5
    Join Date
    Feb 2014
    Posts
    16
    Thanks a lot for the fast response Error404 (I like that). Before I do anything, maybe it's best if you have a look at this (from The Warrior Forum; centering a testimonial (maybe messy code but works for this)):

    John is one of those writers you hope you could keep for life. He has excellent spelling, grammar and sentence structure, while at the same time using keyword phrases like a pro.

    My first order was for over $200 (US), which I sent and then received the articles in groups within e-mails.

    I really enjoyed working with John. Another thing I like is that he stays in touch and keeps you updated if anything comes up."


    -- Henri Junttila

  6. #6
    Join Date
    Feb 2014
    Posts
    16
    Darn -- I meant for the code to show up. Back to the drawing board.

  7. #7
    Join Date
    Feb 2014
    Posts
    16
    Our posts just passed in the night.

    It's not uploaded yet. Could I add an attachment in Word to a post?

  8. #8
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    If you provide a link to the website, everyone on here can easily view the webpage and obtain the code via view page source or inspect element.

  9. #9
    Join Date
    Feb 2014
    Posts
    16
    Error404,

    Is there a trick to showing code in a post without it being changed to text, as happened above?

  10. #10
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Quote Originally Posted by JohnByTheCreek View Post
    Error404,

    Is there a trick to showing code in a post without it being changed to text, as happened above?
    Wrap the content inside code tags as [ CODE ] stuff [ / CODE ] but without the spaces. Alternatively, click on Go Advanced and click on the icon that looks like <> (to the right of the # symbol).

  11. #11
    Join Date
    Feb 2014
    Posts
    16
    It looks awkward to view in Preview. Maybe copy and past for a better look?

    I must leave for a half hour. I'll certainly look back here immediately when I get back.

    I'm sorry for all the back and forth. I'm a liberal arts guy; not a techie. I wish I had that talent.

    If anyone's off to watch The Walking Dead I understand.

    HTML Code:
    [FONT="Times New Roman"][COLOR="Gold"][COLOR="Gold"][I][COLOR="Black"][COLOR="Gold"][COLOR="Black"][FONT="Times New Roman"][/FONT][/COLOR][/COLOR][/COLOR][/I][/COLOR][/COLOR][/FONT][COLOR="Gold"][COLOR="Gold"][I][COLOR="Black"][COLOR="Gold"][COLOR="Black"][/COLOR][/COLOR][FONT="Times New Roman"][SIZE="5"][B]John is one of those writers you hope you could keep for life[/B]. He has excellent spelling, grammar and sentence structure, while at the same time using keyword phrases like a pro. 
    
    My first order was for over $200 (US), which I sent and then received the articles in groups within e-mails. 
    
    I really enjoyed working with John. Another thing I like is that he stays in touch and keeps you updated if anything comes up."[/SIZE][/FONT][COLOR="Black"][/COLOR][/COLOR][/I][/COLOR]
    
    [COLOR="Gold"][COLOR="Black"][FONT="Times New Roman"][SIZE="5"]-- Henri Junttila[/SIZE][/FONT][/COLOR][FONT="Times New Roman"][/FONT][/COLOR][FONT="Times New Roman"][/FONT][/COLOR][FONT="Times New Roman"][/FONT]

  12. #12
    Join Date
    Mar 2011
    Posts
    1,160
    Try:
    Code:
    <div style="width:80%; margin-left:auto; margin-right:auto;">
    <p style="font-style:italic;">John is one of those writers you hope you could keep for life. He has excellent spelling, grammar and sentence structure, while at the same time using keyword phrases like a pro.<br>
    <br>
    My first order was for over $200 (US), which I sent and then received the articles in groups within e-mails.<br>
    <br>
    I really enjoyed working with John. Another thing I like is that he stays in touch and keeps you updated if anything comes up."<br>
    <br>
    <span style="font-style:normal;">-- Henri Junttila</span>
    </p>
    </div>
    You shouldn't normally use inline styles so much. This is just to demonstrate centering a content block (<div>).
    The key is to define a specific 'width' for the block element, and set the left and right margins to 'auto'.

  13. #13
    Join Date
    Feb 2014
    Posts
    16
    Hello Rick,

    The result in Preview is below. Maybe it's the platform (Warrior Forum) that messes it up? I pasted it 3 times; same result.

    Maybe if you showed me a coded, simple two or three line paragraph, I could start from scratch by applying that to my paragraph. I could play around with that.

    I feel guilty that I got you and Error404 involved now.

    John

    <div style="width:80%; margin-left:auto; margin-right:auto;">
    <p style="font-style:italic;">John is one of those writers you hope you could keep for life. He has excellent spelling, grammar and sentence structure, while at the same time using keyword phrases like a pro.<br>
    <br>
    My first order was for over $200 (US), which I sent and then received the articles in groups within e-mails.<br>
    <br>
    I really enjoyed working with John. Another thing I like is that he stays in touch and keeps you updated if anything comes up."<br>
    <br>
    <span style="font-style:normal;">-- Henri Junttila</span>
    </p>
    </div>

  14. #14
    Join Date
    Mar 2011
    Posts
    1,160
    Whatever you tried to paste didn't come through. All I see is the HTML/CSS that I posted. Post a URL to an example page if you can.

  15. #15
    Join Date
    Feb 2014
    Posts
    16
    Rick, actually it did come through. That (the code) was what showed up in my Preview.

    Beyond that now, here's a link to an old 2010 ad of mine on the Warrior Forum. You can easily see "inspect element." That's a start.

    I guess you're not a member; then you could see (for sure) what happens trying to center a block of text in Preview. Maybe just seeing their platform will be enough.

    If you got back to me by late tonight that would be fine. Being Monday I don't expect anything during the day.

    Thanks again (to Error404 too) Rick.

    http://www.warriorforum.com/warrior-...ation-too.html

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles