How to Align Text to the Left in HTML
Cascading Style Sheet, or CSS, code defines how browsers display text alignment on Web pages. Old align attributes and table hacks became obsolete after the release of HTML 4. Using CSS, you can align text within its HTML element or move the entire element to the left or right of the page, depending on your needs. You can apply a text alignment to any HTML element that contains text, such as paragraphs, tables and whole divs.
Other People Are Reading
Instructions
-
-
1
Open the HTML file in an editor of your choice, such as HTML-Kit, jEdit or Notepad++. Windows Notepad also works, but Microsoft Word is not suitable for HTML editing. Find the block of text that you want to align to the left. Note the tags at the beginning and end of the text block. You will see something like this:
<p>Here is some text.</p>
-
2
Open your website's CSS file or find the <style> and </style> tags toward the top of your HTML file. If your site has no CSS file and there are no <style> tags, add the <style> and </style> tags between your <head> and </head> tags. Your CSS code goes between those tags or directly in the CSS file. Here is the code to align text to the left:
tag-name {text-align: left;}
Change "tag-name" to the name of the tag, such as "p" for <p>.
-
-
3
Add an ID attribute to the tag if you want only that particular spot on the page to align to the left. The code might look like this:
<p id="id-name">Here is some text.</p>
Change "id-name" to the name you want to give to the <p> tag. Change your CSS code to the following:
tag-name #id-name {text-align: left;}
-
4
Add "float: left;" to move the whole HTML element to the left of the page. This is useful if you need a text box of a defined width to appear to the left of other text, similar to the asides found in magazine articles. The HTML element is what your HTML tag creates in the browser, so <p> creates a paragraph element. Here is the changed CSS code:
Tag-name #id-name {float: left; text-align: left;}
-
1
Tips & Warnings
Floating an element on the page sometimes causes the layout to break. If another element floats up where it should not, give it the rule "clear: both" in CSS to force it back down.
Resources
- Photo Credit Jupiterimages/Photos.com/Getty Images
