InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS text-align – align text left, right or justify

on Mar 21, 2016

CSS property text-align specifies how the inline-level content of a block is aligned along the inline axis. Note that text-align will also affect inline and inline-block elements in addition to text.

CSS property text-align

CSS version: CSS 2.1
Value: left | right | center | justify | inherit
Initial: left if direction is ltr, right if direction is rtl
Applies to: block containers
Inherited: yes
Percentages: N/A
Animatable: no

text-align values

leftalign left in each line box
rightalign right in each line box
centeralign center in each line box
justifystrech spaces so that first word aligns left and last word aligns right. This way all line boxes have same with (execept last one).
inheritinherit value from parent container

Examples – left, right and justify text-align

In the following code, CSS property text-align can be changed to the following values
  • left
  • right
  • justify
<style> 
.box {
  width: 200px; 
  background-color: lightgreen;
  text-align: left;
}
</style>
<div class="box">
This is some text which is inside a block element. It is created to see behaviour of property text-align.
</div>
text-align refresh done
try it online

Related

  • CSS letter-spacing - additional spacing between adjacent chars
  • CSS text-decoration - underline, overline and strikeout text
  • CSS text-indent - indent text in a block
  • CSS text-transform - capitalize, uppercase and lowercase text
  • CSS word-spacing - additional space between words

Specification

  • W3C CSS 2.1 text-align specification

Suggested posts:

  1. CSS – align text in center horizontally
  2. CSS – how to align image and text in center vertically
  3. CSS text-overflow – truncate text with three dots
  4. CSS – align multiple divs horizontally
  5. CSS text-indent – indent text in a block
  6. CSS justify-content – flexbox children aligment
  7. CSS – align div in center horizontally
  8. CSS text-transform – capitalize, uppercase and lowercase text
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress