Alignment and Justification Properties

Alignment and Justification Properties are:text-align and text-justify

text-align specifies the alignment for a text block. Its allowed values are:

start
end
left
right
center
justify

text-justify specifies how to justify the text.

The text-align property can align text to a named edge (left or right). The text-align property can align text to the edges that are innate to a language with the start and end values.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
            #myID { 
                width: 400px; 
                margin: 5px; 
                padding: 5px; 
                border: medium double black; 
                background-color: lightgrey; 
            } 
        </style> 
    </head> 
    <body> 
        <p id="myID"> 
            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).

            HyperText Markup Language (HTML) is the main markup language for 
            displaying web pages and other information that can be displayed 
            in a web browser(From From Wikipedia, the free encyclopedia).
        </p> 
        <p> 
            <button>Start</button> 
            <button>End</button> 
            <button>Left</button> 
            <button>Right</button> 
            <button>Justify</button> 
            <button>Center</button> 
        </p> 
        <script> 
            var buttons = document.getElementsByTagName("BUTTON"); 
            for (var i = 0; i < buttons.length; i++) { 
                buttons[i].onclick = function(e) { 
                    document.getElementById("myID").style.textAlign = e.target.innerHTML; 
                }; 
            } 
        </script> 
    </body> 
</html>

Click to view the demo

The allowed values for text-justify property are:

Value	Description
auto	Let the browser choose.
none	Justification is disabled.
inter-word	Spacing is distributed between words(good for English).
inter-ideograph	Spacing is distributed between words and at inter-graphemic boundaries(good for Japanese and Korean).
inter-cluster	Spacing is distributed between words and at grapheme cluster boundaries(good for Thai).
distribute	Spacing is distributed between words and at grapheme cluster boundaries except those that use connected or cursive styles.
kashida	Justification is applied by elongating characters.

Home
HTML CSS Book
CSS