Aling Text with text-align

Description

text-align specifies the alignment for a block of text

Its possible values are: start end left right center justify.

Example

The following code shows the text-align property applied to blocks of text.


<html>
<head>
<style type='text/css'>
body {<!--from  w ww  .  j a v a2  s . co m-->
    font: 12px sans-serif;
}
h1 {
    font: 14px sans-serif;
    margin: 0;
    color: darkslateblue;
    border-bottom: 1px solid steelblue;
}
p {
color: darkslateblue;
    padding: 10px;
}
p#left {
    text-align: left;
}
p#center {
    text-align: center;
}
p#right {
    text-align: right;
}
p#justify {
    text-align: justify;
}
</style>


</head>
<body>
    <p id='left'>
        "Fettuccine alfredo is macaroni and cheese for adults."
    </p>
    <p id='right'>
        "Rice is great if you're really hungry and want to eat two
        thousand of something."
    </p>
    <p id='center'>
        "I'm lactose intolerant, so I eat my cereal with a fork."
    </p>
    <p id='justify'>
        "this is a test. this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test. this is a test. "
    </p>
</body>
</html>

Click to view the demo





















Home »
  HTML CSS »
    CSS »




CSS Introduction
CSS Background
CSS Border
CSS Box Layout
CSS Text
CSS Font
CSS Form
CSS List
CSS Selectors
CSS Others
CSS Table