Centering Text and Images in Your Ning Boxes:

Copyright © 2009, Ning Directory.

A lot of you know all about HTML Tags, and how to center text and images. For those of you who don't and want to learn more; let's discuss the HTML CENTER TAG in this Ning Network Tip.

There are several ways to center text and images in your Ning Boxes, using HTML (hypertext markup language). You can add HTML Tags to most any Ning Box - - where you see the Editor buttons for: Bold, Italics, Underline, Strikeout, Add Link, and Add Image. In other words, you can insert HTML tags to center your text and images, within: a Ning Text Box, Discussion Text Box, Main Group Text Box, Forum, Blog, Page, Comments, etc...And in fact, you are adding HTML Tags, when you click on any of these built-in Editor buttons! :-)

If you don't want to learn how to write the HTML, or just want convenience, you can use our built-in Editor for centering, and just about any HTML Tag you could ever need. HTML Editor Link
From within the HTML Editor, center your text or image, as you would in any word processor. Click on the HTML button (upper right), and the Editor will show you the HTML code/tags for your centering. The HTML WYSIWYG Editor we offer, is a great way to learn and write HTML.

All HTML tags have a Start Tag and an End Tag. Each Tag type (start or end) is encased with left and right arrows (less than and greater than symbols). The Start Tag contains the Tag name. For example, the paragraph tag, uses the letter <p> for it's tag name. The End Tag for the paragraph tag would contain a forward slash / in front of the name, like this: </p>


Centering Text with Paragraph Tag:

Paragraph Start Tag for Centering: <p style="text-align: center;">
Paragraph End Tag for Centering: </p>

<p style="text-align: center;">Type your paragraph text within this tag, and it will be centered. When using the paragraph tag for centering, use the Style parameter to apply the Center attribute.</p>

Note: Your tag code syntax must be perfect. Browsers are not very forgiving. Be sure to include your quotes around the entire style. And to be safe, use the semi-colon too. The semi-colon is used when applying multiple styles within one tag, and to terminate a style in styles and CSS.

Centering an Image:

Use the exact same tag for centering an image. Here is an example:
The Code: <p style="text-align: center;"><img src="http://theningdirectory.ning.com/custom_images/BrandYourNingLogo.png"></p>
The Centered Image:


And, there are other ways to center. The paragraph tag works as good as any, and a great way to start. I will add the DIV CENTER, when I add the DIV TAG as a Tip. You can use the word CENTER as a TAG. However, it is highly recommended that we not use this tag, with the thought that it may not be supported by Browsers in the future. I'm bad to use it. *blush*

Just for the record: some HTML Center Tags are said to be deprecated (A deprecated element or attribute is one that has been outdated, or may become obsolete in the future. But browsers should continue to support deprecated elements for backward compatibility.)
The "way to do it" now, is via your CSS (Cascading Style Sheets). However, I say, when working with a platform such as Ning, which is basically an elaborate Content Management Tool for Social Networks - - we need plain Jane HTML Tags for our Ning Boxes. Note: The <p style="text-align: center;"> is not considered obsolete, since we're using the Style parameter.

Views: 92

Replies to This Discussion

No, I don't, LOL! Did this really help you? It took quite a while to write. It had to be as perfect as possible. That would be great if it helps any of our members or visitors. :-)

I ask this, because I forget that things like this tip, that are 2nd nature to me, could really help. I enjoy the idea of empowering Network Creators.
The Kingdomz X said:...
This work for me and l had to write it on a pad next to my computer, until l use it more, l need help remembering, lol It was long ado , l learn to use a code to change the color of text, After using it for a short time l was able to remember it. lol
I use w3schools.com also as an editor. I was able to make clickable images and fix my google search to search within my site. I like the html editor because it makes the site look more professional and lets me learn ways to format text and links.

Its great to have these.

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips