www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 25 of 25

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

  1. #16
    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

  2. #17
    Join Date
    Feb 2014
    Posts
    16
    Error404 and Rick,

    First, I apologize for getting you both involved. Thanks so much.

    Strange, Error404; I just did send a link a few minutes before you last post minutes ago. I thought you were replying to that. I'll do it again.

    (Rick, you said your code showed up when I sent you the last result last night. That's actually what showed up in my Preview for whatever reason. I guess we're beyond that now since I'm including a link to a similar page (Warrior Forum platform) here.)

    Here's a link to an old ad on the Warrior Forum from 2010. Even idiot me could see "inspect element."

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

    I'll be away a little while this morning. I certainly don't expect a response during the day as it's Monday. Tonight would be more than fine considering both your available time..

    John

  3. #18
    Join Date
    Feb 2014
    Posts
    16
    PS The code you both saw was vastly generated by the website (I just highlighted and clicked); I added additional code. Result: a mess, but it showed up fine, except for the centering problem.

  4. #19
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    The formatting used in your post via the link is relatively straight-forward and fairly easy to manually duplicate, so that's not a terrible issue. Copying and pasting that code into a webpage may not work if the webpage uses HTML5 (i.e. modern webpages), however, many forums still use that syntax and will accept it. If you're getting everything to work except for the positioning on the screen, you can use the CSS properties of text-align and float. Keep in mind, when using float, you may want to use clear: both/left/right for subsequent elements as their positioning may be affected by the floated element. You can find some examples online of float but keep in mind, it only works for left and right, not top, center and bottom (although there are different work-arounds to achieve that effect).

  5. #20
    Join Date
    Jan 2014
    Location
    Boston, Massachusetts
    Posts
    64
    What is the website URL that you're having this problem on? If it's just in development, post a bit of code to codepen.

    All I can think of is whatever element the text is in needs to be centered. Give the body a width, and set the element as follows, using a div as an example

    div {
    margin: 0 auto;
    padding: 5px;
    width: auto;
    }

    That should center the text container and the text inside will be left-aligned. Width: auto may not be necessary. Try with and without.

  6. #21
    Join Date
    Feb 2014
    Posts
    16
    Error404,

    I just got to look at your post. I'll digest all that, see what I can accomplish and respond in the near future.

    Thank you.

    John

  7. #22
    Join Date
    Feb 2014
    Posts
    16
    Hi 404,

    As I replied to your previous post, I'll work on this and get back to you (and the others) in the near future.

    Thanks.

    John

  8. #23
    Join Date
    Feb 2014
    Posts
    16
    Thanks winthropite,

    I'll take your information into account and respond to you too in the near future.

    The website URL (my page) is:

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

  9. #24
    Join Date
    Feb 2014
    Posts
    16
    Hi Rick,

    I'm going over different suggestions now. I'm a little sleepy and forgot if I sent you a URL to look at. Here it is.

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

    I'll let you know what happened in the near future.

    Thanks again.

    John

  10. #25
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Sorry I couldn't reply more last night. If it's a matter of having some content aligned to the center and other stuff to the left, then try the following code (try resizing the browser as well to see how it will adjust horizontally). Hopefully it helps. Once that is done, you can apply the necessary colouring and any text formatting as you wish. Added in some comments in the code to help you out, hopefully it does what you're after.

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<style>
    			#outer
    			{
    				width: 50%;
    				height: 400px;
    				clear: both; <!-- in case you want to have other left or right-aligned stuff around, this div won't be affected by it -->
    				zoom: 1; <!-- helping out IE here -->
    			}
    			
    			#inner
    			{
    				width: 20%;
    				margin: 0 auto;
    			}
    			
    			#p1 
    			{
    				float: left;
    				position: absolute;
    				top: 80px;
    			}
    			
    			.text
    			{
    				<!-- format the designated paragraphs (color, bold, size, etc...) -->
    			}
    		</style>
    	</head>
    	<body>
    		<div id = "outer">
    			<div id = "inner">
    				<p class = "text">stuff to center</p>
    			</div>
    		</div>
    			<p id = "p1" class = "text">stuff to left</p>
    	</body>
    </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