Text-align - CSS: Cascading Style Sheets - MDN Web Docs

Có thể bạn quan tâm

Skip to main content
Skip to search
Skip to select language

References
CSS
text-align

Article Actions

English (US)
- Remember language
- Deutsch
- Español
- Français
- 日本語
- 한국어
- Português (do Brasil)
- Русский
- 中文 (简体)

Try it
Syntax
Accessibility
Formal definition
Formal syntax
Examples
Specifications
Browser compatibility
See also

CSS
Beginner's tutorials
Your first website: Styling the content
CSS styling basics
1. What is CSS?
2. Getting started with CSS
3. Challenge: Styling a biography page
4. Basic CSS selectors
5. Attribute selectors
6. Pseudo-classes and pseudo-elements
7. Combinators
8. The box model
9. Handling conflicts
10. CSS values and units
11. Sizing items in CSS
12. Backgrounds and borders
13. Overflowing content
14. Images, media, and form elements
15. Styling tables
16. Debugging CSS
17. Challenge: Fundamental CSS comprehension
18. Challenge: Creating fancy letterheaded paper
19. Challenge: A cool-looking box
CSS text styling
1. Fundamental text and font styling
2. Styling lists
3. Styling links
4. Web fonts
5. Challenge: Typesetting a community school homepage
CSS layout
1. Introduction to CSS layout
2. Floats
3. Positioning
4. Flexbox
5. CSS grid layout
6. Responsive design
7. Media query fundamentals
8. Challenge: Fundamental layout comprehension
CSS reference
Modules
1. CSS anchor positioning
2. CSS animations
3. CSS backgrounds and borders
4. CSS basic user interface
5. CSS box alignment
6. CSS box model
7. CSS box sizing
8. CSS cascade and inheritance
9. CSS color adjustment
10. CSS colors
11. CSS compositing and blending
12. CSS conditional rules
13. CSS containment
14. CSS counter styles
15. CSS custom properties for cascading variables
16. CSS display
17. CSS filter effects
18. CSS flexible box layout
19. CSS font loading
20. CSS fonts
21. CSS fragmentation
22. CSS generated content
23. CSS grid layout
24. CSS images
25. CSS inline layout
26. CSS lists and counters
27. CSS logical properties and values
28. CSS masking
29. CSS media queries
30. CSS motion path
31. CSS multi-column layout
32. CSS namespaces
33. CSS nesting
34. CSS overflow
35. CSS overscroll behavior
36. CSS paged media
37. CSS positioned layout
38. CSS properties and values API
39. CSS pseudo-elements
40. CSS ruby layout
41. CSS scoping
42. CSS scroll snap
43. CSS scroll-driven animations
44. CSS scrollbars styling
45. CSS selectors
46. CSS shadow parts
47. CSS shapes
48. CSS syntax
49. CSS table
50. CSS text
51. CSS text decoration
52. CSS transforms
53. CSS transitions
54. CSS view transitions
55. CSS writing modes
56. CSSOM view
Properties
1. -moz-*
  1. -moz-float-edge Non-standard Deprecated
  2. -moz-force-broken-image-icon Non-standard Deprecated
  3. -moz-image-region Non-standard
  4. -moz-orient Non-standard
  5. -moz-user-focus Non-standard Deprecated
  6. -moz-user-input Non-standard Deprecated
2. -webkit-*
  1. -webkit-border-before Non-standard
  2. -webkit-box-reflect Non-standard
  3. -webkit-line-clamp
  4. -webkit-mask-box-image Non-standard
  5. -webkit-mask-composite Non-standard
  6. -webkit-mask-position-x Non-standard
  7. -webkit-mask-position-y Non-standard
  8. -webkit-mask-repeat-x Non-standard
  9. -webkit-mask-repeat-y Non-standard
  10. -webkit-tap-highlight-color Non-standard
  11. -webkit-text-fill-color
  12. -webkit-text-security Non-standard
  13. -webkit-text-stroke
  14. -webkit-text-stroke-color
  15. -webkit-text-stroke-width
  16. -webkit-touch-callout Non-standard
3. accent-color
4. align-*
  1. align-content
  2. align-items
  3. align-self
5. all
6. anchor-name Experimental
7. animation-*
  1. animation
  2. animation-composition
  3. animation-delay
  4. animation-direction
  5. animation-duration
  6. animation-fill-mode
  7. animation-iteration-count
  8. animation-name
  9. animation-play-state
  10. animation-range Experimental
  11. animation-range-end Experimental
  12. animation-range-start Experimental
  13. animation-timeline Experimental
  14. animation-timing-function
8. appearance
9. aspect-ratio
10. backdrop-filter
11. backface-visibility
12. background-*
  1. background
  2. background-attachment
  3. background-blend-mode
  4. background-clip
  5. background-color
  6. background-image
  7. background-origin
  8. background-position
  9. background-position-x
  10. background-position-y
  11. background-repeat
  12. background-size
13. block-size
14. border-*
  1. border
  2. border-block
  3. border-block-color
  4. border-block-end
  5. border-block-end-color
  6. border-block-end-style
  7. border-block-end-width
  8. border-block-start
  9. border-block-start-color
  10. border-block-start-style
  11. border-block-start-width
  12. border-block-style
  13. border-block-width
  14. border-bottom
  15. border-bottom-color
  16. border-bottom-left-radius
  17. border-bottom-right-radius
  18. border-bottom-style
  19. border-bottom-width
  20. border-collapse
  21. border-color
  22. border-end-end-radius
  23. border-end-start-radius
  24. border-image
  25. border-image-outset
  26. border-image-repeat
  27. border-image-slice
  28. border-image-source
  29. border-image-width
  30. border-inline
  31. border-inline-color
  32. border-inline-end
  33. border-inline-end-color
  34. border-inline-end-style
  35. border-inline-end-width
  36. border-inline-start
  37. border-inline-start-color
  38. border-inline-start-style
  39. border-inline-start-width
  40. border-inline-style
  41. border-inline-width
  42. border-left
  43. border-left-color
  44. border-left-style
  45. border-left-width
  46. border-radius
  47. border-right
  48. border-right-color
  49. border-right-style
  50. border-right-width
  51. border-spacing
  52. border-start-end-radius
  53. border-start-start-radius
  54. border-style
  55. border-top
  56. border-top-color
  57. border-top-left-radius
  58. border-top-right-radius
  59. border-top-style
  60. border-top-width
  61. border-width
15. bottom
16. box-*
  1. box-align Non-standard Deprecated
  2. box-decoration-break
  3. box-direction Non-standard Deprecated
  4. box-flex Non-standard Deprecated
  5. box-flex-group Non-standard Deprecated
  6. box-lines Non-standard Deprecated
  7. box-ordinal-group Non-standard Deprecated
  8. box-orient Non-standard Deprecated
  9. box-pack Non-standard Deprecated
  10. box-shadow
  11. box-sizing
17. break-*
  1. break-after
  2. break-before
  3. break-inside
18. caption-side
19. caret-color
20. clear
21. clip-*
  1. clip Deprecated
  2. clip-path
  3. clip-rule
22. color-*
  1. color
  2. color-interpolation
  3. color-interpolation-filters
  4. color-scheme
23. column-*
  1. column-count
  2. column-fill
  3. column-gap
  4. column-rule
  5. column-rule-color
  6. column-rule-style
  7. column-rule-width
  8. column-span
  9. column-width
24. columns
25. contain-*
  1. contain
  2. contain-intrinsic-block-size
  3. contain-intrinsic-height
  4. contain-intrinsic-inline-size
  5. contain-intrinsic-size
  6. contain-intrinsic-width
26. container-*
  1. container
  2. container-name
  3. container-type
27. content
28. content-visibility
29. counter-*
  1. counter-increment
  2. counter-reset
  3. counter-set
30. cursor
31. cx
32. cy
33. d
34. direction
35. display
36. dominant-baseline
37. empty-cells
38. field-sizing Experimental
39. fill-*
  1. fill
  2. fill-opacity
  3. fill-rule
40. filter
41. flex-*
  1. flex
  2. flex-basis
  3. flex-direction
  4. flex-flow
  5. flex-grow
  6. flex-shrink
  7. flex-wrap
42. float
43. flood-color
44. flood-opacity
45. font-*
  1. font
  2. font-family
  3. font-feature-settings
  4. font-kerning
  5. font-language-override
  6. font-optical-sizing
  7. font-palette
  8. font-size
  9. font-size-adjust
  10. font-smooth Non-standard
  11. font-stretch
  12. font-style
  13. font-synthesis
  14. font-synthesis-position Experimental
  15. font-synthesis-small-caps
  16. font-synthesis-style
  17. font-synthesis-weight
  18. font-variant
  19. font-variant-alternates
  20. font-variant-caps
  21. font-variant-east-asian
  22. font-variant-emoji
  23. font-variant-ligatures
  24. font-variant-numeric
  25. font-variant-position
  26. font-variation-settings
  27. font-weight
46. forced-color-adjust
47. gap
48. grid-*
  1. grid
  2. grid-area
  3. grid-auto-columns
  4. grid-auto-flow
  5. grid-auto-rows
  6. grid-column
  7. grid-column-end
  8. grid-column-start
  9. grid-row
  10. grid-row-end
  11. grid-row-start
  12. grid-template
  13. grid-template-areas
  14. grid-template-columns
  15. grid-template-rows
49. hanging-punctuation
50. height
51. hyphenate-character
52. hyphenate-limit-chars
53. hyphens
54. image-*
  1. image-orientation
  2. image-rendering
  3. image-resolution Experimental
55. initial-letter
56. inline-size
57. inset-*
  1. inset
  2. inset-block
  3. inset-block-end
  4. inset-block-start
  5. inset-inline
  6. inset-inline-end
  7. inset-inline-start
58. interpolate-size Experimental
59. isolation
60. justify-*
  1. justify-content
  2. justify-items
  3. justify-self
61. left
62. letter-spacing
63. lighting-color
64. line-*
  1. line-break
  2. line-height
  3. line-height-step Experimental
65. list-*
  1. list-style
  2. list-style-image
  3. list-style-position
  4. list-style-type
66. margin-*
  1. margin
  2. margin-block
  3. margin-block-end
  4. margin-block-start
  5. margin-bottom
  6. margin-inline
  7. margin-inline-end
  8. margin-inline-start
  9. margin-left
  10. margin-right
  11. margin-top
  12. margin-trim Experimental
67. marker-*
  1. marker
  2. marker-end
  3. marker-mid
  4. marker-start
68. mask-*
  1. mask
  2. mask-border
  3. mask-border-mode
  4. mask-border-outset
  5. mask-border-repeat
  6. mask-border-slice
  7. mask-border-source
  8. mask-border-width
  9. mask-clip
  10. mask-composite
  11. mask-image
  12. mask-mode
  13. mask-origin
  14. mask-position
  15. mask-repeat
  16. mask-size
  17. mask-type
69. math-*
  1. math-depth
  2. math-shift Experimental
  3. math-style
70. max-*
  1. max-block-size
  2. max-height
  3. max-inline-size
  4. max-width
71. min-*
  1. min-block-size
  2. min-height
  3. min-inline-size
  4. min-width
72. mix-blend-mode
73. object-fit
74. object-position
75. offset-*
  1. offset
  2. offset-anchor
  3. offset-distance
  4. offset-path
  5. offset-position
  6. offset-rotate
76. opacity
77. order
78. orphans
79. outline-*
  1. outline
  2. outline-color
  3. outline-offset
  4. outline-style
  5. outline-width
80. overflow-*
  1. overflow
  2. overflow-anchor
  3. overflow-block
  4. overflow-clip-margin
  5. overflow-inline
  6. overflow-wrap
  7. overflow-x
  8. overflow-y
81. overlay Experimental
82. overscroll-*
  1. overscroll-behavior
  2. overscroll-behavior-block
  3. overscroll-behavior-inline
  4. overscroll-behavior-x
  5. overscroll-behavior-y
83. padding-*
  1. padding
  2. padding-block
  3. padding-block-end
  4. padding-block-start
  5. padding-bottom
  6. padding-inline
  7. padding-inline-end
  8. padding-inline-start
  9. padding-left
  10. padding-right
  11. padding-top
84. page-*
  1. page
  2. page-break-after
  3. page-break-before
  4. page-break-inside
85. paint-order
86. perspective
87. perspective-origin
88. place-*
  1. place-content
  2. place-items
  3. place-self
89. pointer-events
90. position-*
  1. position
  2. position-anchor Experimental
  3. position-area Experimental
  4. position-try Experimental
  5. position-try-fallbacks Experimental
  6. position-try-order Experimental
  7. position-visibility Experimental
91. print-color-adjust
92. quotes
93. r
94. resize
95. right
96. rotate
97. row-gap
98. ruby-align
99. ruby-position
100. rx
101. ry
102. scale
103. scroll-*
  1. scroll-behavior
  2. scroll-margin
  3. scroll-margin-block
  4. scroll-margin-block-end
  5. scroll-margin-block-start
  6. scroll-margin-bottom
  7. scroll-margin-inline
  8. scroll-margin-inline-end
  9. scroll-margin-inline-start
  10. scroll-margin-left
  11. scroll-margin-right
  12. scroll-margin-top
  13. scroll-padding
  14. scroll-padding-block
  15. scroll-padding-block-end
  16. scroll-padding-block-start
  17. scroll-padding-bottom
  18. scroll-padding-inline
  19. scroll-padding-inline-end
  20. scroll-padding-inline-start
  21. scroll-padding-left
  22. scroll-padding-right
  23. scroll-padding-top
  24. scroll-snap-align
  25. scroll-snap-stop
  26. scroll-snap-type
  27. scroll-timeline Experimental
  28. scroll-timeline-axis Experimental
  29. scroll-timeline-name Experimental
104. scrollbar-*
  1. scrollbar-color
  2. scrollbar-gutter
  3. scrollbar-width
105. shape-*
  1. shape-image-threshold
  2. shape-margin
  3. shape-outside
  4. shape-rendering
106. stop-color
107. stop-opacity
108. stroke-*
  1. stroke
  2. stroke-dasharray
  3. stroke-dashoffset
  4. stroke-linecap
  5. stroke-linejoin
  6. stroke-miterlimit
  7. stroke-opacity
  8. stroke-width
109. tab-size
110. table-layout
111. text-*
  1. text-align
  2. text-align-last
  3. text-anchor
  4. text-combine-upright
  5. text-decoration
  6. text-decoration-color
  7. text-decoration-line
  8. text-decoration-skip Experimental
  9. text-decoration-skip-ink
  10. text-decoration-style
  11. text-decoration-thickness
  12. text-emphasis
  13. text-emphasis-color
  14. text-emphasis-position
  15. text-emphasis-style
  16. text-indent
  17. text-justify
  18. text-orientation
  19. text-overflow
  20. text-rendering
  21. text-shadow
  22. text-size-adjust Experimental
  23. text-spacing-trim Experimental
  24. text-transform
  25. text-underline-offset
  26. text-underline-position
  27. text-wrap
  28. text-wrap-mode
  29. text-wrap-style
112. timeline-scope Experimental
113. top
114. touch-action
115. transform-*
  1. transform
  2. transform-box
  3. transform-origin
  4. transform-style
116. transition-*
  1. transition
  2. transition-behavior
  3. transition-delay
  4. transition-duration
  5. transition-property
  6. transition-timing-function
117. translate
118. unicode-bidi
119. user-modify Non-standard Deprecated
120. user-select
121. vector-effect
122. vertical-align
123. view-*
  1. view-timeline Experimental
  2. view-timeline-axis Experimental
  3. view-timeline-inset Experimental
  4. view-timeline-name Experimental
  5. view-transition-name
124. visibility
125. white-space
126. white-space-collapse
127. widows
128. width
129. will-change
130. word-break
131. word-spacing
132. writing-mode
133. x
134. y
135. z-index
136. zoom
Selectors
1. & nesting selector
2. Attribute selectors
3. Class selectors
4. ID selectors
5. Type selectors
6. Universal selectors
Combinators
1. Child combinator
2. Column combinator Experimental
3. Descendant combinator
4. Namespace separator
5. Next-sibling combinator
6. Selector list
7. Subsequent-sibling combinator
Pseudo-classes
1. :-moz-broken Non-standard Deprecated
2. :-moz-drag-over Non-standard
3. :-moz-first-node Experimental Non-standard
4. :-moz-handler-blocked Non-standard
5. :-moz-handler-crashed Non-standard
6. :-moz-handler-disabled Non-standard
7. :-moz-last-node Experimental Non-standard
8. :-moz-loading Non-standard
9. :-moz-locale-dir(ltr) Non-standard
10. :-moz-locale-dir(rtl) Non-standard
11. :-moz-only-whitespace Non-standard
12. :-moz-submit-invalid Non-standard
13. :-moz-suppressed Non-standard
14. :-moz-user-disabled Non-standard
15. :-moz-window-inactive Non-standard
16. :active
17. :any-link
18. :autofill
19. :blank Experimental
20. :buffering
21. :checked
22. :current Experimental
23. :default
24. :defined
25. :dir()
26. :disabled
27. :empty
28. :enabled
29. :first
30. :first-child
31. :first-of-type
32. :focus
33. :focus-visible
34. :focus-within
35. :fullscreen
36. :future
37. :has-slotted Experimental
38. :has()
39. :host
40. :host-context()
41. :host()
42. :hover
43. :in-range
44. :indeterminate
45. :invalid
46. :is()
47. :lang()
48. :last-child
49. :last-of-type
50. :left
51. :link
52. :local-link Experimental
53. :modal
54. :muted
55. :not()
56. :nth-child()
57. :nth-last-child()
58. :nth-last-of-type()
59. :nth-of-type()
60. :only-child
61. :only-of-type
62. :optional
63. :out-of-range
64. :past
65. :paused
66. :picture-in-picture
67. :placeholder-shown
68. :playing
69. :popover-open
70. :read-only
71. :read-write
72. :required
73. :right
74. :root
75. :scope
76. :seeking
77. :stalled
78. :state()
79. :target
80. :target-within Experimental
81. :user-invalid
82. :user-valid
83. :valid
84. :visited
85. :volume-locked
86. :where()
Pseudo-elements
1. ::-moz-color-swatch Non-standard
2. ::-moz-focus-inner Experimental Non-standard
3. ::-moz-list-bullet Experimental Non-standard
4. ::-moz-list-number Experimental Non-standard
5. ::-moz-meter-bar Non-standard
6. ::-moz-progress-bar Experimental Non-standard
7. ::-moz-range-progress Non-standard
8. ::-moz-range-thumb Non-standard
9. ::-moz-range-track Non-standard
10. ::-webkit-inner-spin-button Non-standard
11. ::-webkit-meter-bar Non-standard Deprecated
12. ::-webkit-meter-even-less-good-value Non-standard
13. ::-webkit-meter-inner-element Non-standard
14. ::-webkit-meter-optimum-value Non-standard
15. ::-webkit-meter-suboptimum-value Non-standard
16. ::-webkit-progress-bar Non-standard
17. ::-webkit-progress-inner-element Non-standard
18. ::-webkit-progress-value Non-standard
19. ::-webkit-scrollbar Non-standard
20. ::-webkit-search-cancel-button Non-standard
21. ::-webkit-search-results-button Non-standard
22. ::-webkit-slider-runnable-track Experimental Non-standard
23. ::-webkit-slider-thumb Experimental Non-standard
24. ::after
25. ::backdrop
26. ::before
27. ::cue
28. ::details-content
29. ::file-selector-button
30. ::first-letter
31. ::first-line
32. ::grammar-error
33. ::highlight()
34. ::marker
35. ::part()
36. ::placeholder
37. ::selection
38. ::slotted()
39. ::spelling-error
40. ::target-text
41. ::view-transition
42. ::view-transition-group
43. ::view-transition-image-pair
44. ::view-transition-new
45. ::view-transition-old
At-rules
1. @charset
2. @color-profile
3. @container
4. @counter-style
5. @document Non-standard Deprecated
6. @font-face
7. @font-feature-values
8. @font-palette-values
9. @import
10. @keyframes
11. @layer
12. @media
13. @namespace
14. @page
15. @position-try Experimental
16. @property
17. @scope
18. @starting-style
19. @supports
20. @view-transition
Functions
1. -moz-image-rect Non-standard Deprecated
2. abs()
3. acos()
4. anchor-size() Experimental
5. anchor() Experimental
6. asin()
7. atan()
8. atan2()
9. attr()
10. calc-size() Experimental
11. calc()
12. clamp()
13. cos()
14. counter()
15. counters()
16. cross-fade()
17. element() Experimental
18. env()
19. exp()
20. fit-content()
21. hypot()
22. log()
23. max()
24. min()
25. minmax()
26. mod()
27. pow()
28. ray()
29. rem()
30. repeat()
31. round()
32. sign()
33. sin()
34. sqrt()
35. symbols()
36. tan()
37. url()
38. var()
Types
1. <absolute-size>
2. <alpha-value>
3. <angle-percentage>
4. <angle>
5. <basic-shape>
6. <blend-mode>
7. <box-edge>
8. <calc-keyword>
9. <calc-sum>
10. <color-interpolation-method>
11. <color>
12. <custom-ident>
13. <dashed-ident>
14. <dimension>
15. <display-box>
16. <display-inside>
17. <display-internal>
18. <display-legacy>
19. <display-listitem>
20. <display-outside>
21. <easing-function>
22. <filter-function>
23. <flex>
24. <frequency-percentage>
25. <frequency>
26. <generic-family>
27. <gradient>
28. <hex-color>
29. <hue-interpolation-method>
30. <hue>
31. <ident>
32. <image>
33. <integer>
34. <length-percentage>
35. <length>
36. <line-style>
37. <named-color>
38. <number>
39. <overflow>
40. <percentage>
41. <position-area> Experimental
42. <position>
43. <ratio>
44. <relative-size>
45. <resolution>
46. <shape> Deprecated
47. <string>
48. <system-color>
49. <time-percentage>
50. <time>
51. <transform-function>
52. <url>
Guides
Animations
1. Using CSS animations
Backgrounds and Borders
1. Using multiple backgrounds
2. Resizing background images
Box alignment
1. Box alignment in block layout
2. Box alignment in flexbox
3. Box alignment in grid layout
4. Box alignment in multi-column layout
Box model
1. Introduction to the CSS basic box model
2. Mastering margin collapsing
Colors
1. Applying_color_to_HTML_elements
2. Color values
3. Using relative colors
4. Using color wisely
5. Accessibility_Understanding_colors_and_luminance"
6. Accessibility: Color contrast
Columns
1. Basic concepts of multi-column layout
2. Styling columns
3. Spanning and balancing columns
4. Handling overflow in multi-column layout
5. Handling content breaks in multi-column layout
Conditional rules
1. Using feature queries
Containment
1. Using CSS containment
2. CSS container queries
3. Using container size and style queries
CSSOM view
1. Coordinate systems
Flexbox
1. Basic concepts of flexbox
2. Relationship of flexbox to other layout methods
3. Aligning items in a flex container
4. Ordering flex items
5. Controlling ratios of flex items along the main axis
6. Mastering wrapping of flex items
7. Typical use cases of flexbox
Flow layout
1. Block and inline layout in normal flow
2. In flow and out of flow
3. Introduction to formatting contexts
4. Flow layout and writing modes
5. Flow layout and overflow
Fonts
1. OpenType font features guide
2. Variable fonts guide
Grid
1. Basic concepts of grid layout
2. Relationship of grid layout to other layout methods
3. Grid layout using line-based placement
4. Grid template areas
5. Layout using named grid lines
6. Auto-placement in grid layout
7. Box alignment in grid layout
8. Grids, logical values, and writing modes
9. Grid layout and accessibility
10. CSS grid layout and progressive enhancement
11. Realizing common layouts using grids
12. Subgrid
13. Masonry layout Experimental
Images
1. Using CSS gradients
Lists and counters
1. Using CSS counters
2. Consistent list indentation
Logical properties
1. Basic concepts of logical properties and values
2. Logical properties for floating and positioning
3. Logical properties for margins, borders, and padding
4. Logical properties for sizing
Math functions
1. Using CSS math functions
Media queries
1. Using media queries
2. Using media queries for accessibility
3. Testing media queries programmatically
4. Printing
Nesting style rules
1. Using CSS nesting
2. CSS nesting at-rules
3. CSS nesting and specificity
Positioning
1. Understanding z-index
Scroll snap
1. Basic concepts of scroll snap
Shapes
1. Overview of shapes
2. Shapes from box values
3. Basic shapes with shape-outside
4. Shapes from images
Text
1. Wrapping and breaking text
Transforms
1. Using CSS transforms
Transitions
1. Using CSS transitions
CSS Layout cookbook
1. Recipe: Media objects
2. Column layouts
3. Center an element
4. Sticky footers
5. Split navigation
6. Breadcrumb navigation
7. List group with badges
8. Pagination
9. Card
10. Grid wrapper
Tools
1. Color picker tool
2. Box-shadow generator
3. Border-image generator
4. Border-radius generator

Try it
Syntax
Accessibility
Formal definition
Formal syntax
Examples
Specifications
Browser compatibility
See also

The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.

Try it

Syntax

css/* Keyword values */ text-align: start; text-align: end; text-align: left; text-align: right; text-align: center; text-align: justify; text-align: match-parent; /* Block alignment values (Non-standard syntax) */ text-align: -moz-center; text-align: -webkit-center; /* Global values */ text-align: inherit; text-align: initial; text-align: revert; text-align: revert-layer; text-align: unset;

The text-align property is specified as a single keyword from the list below.

Values

start

The same as left if direction is left-to-right and right if direction is right-to-left.

end

The same as right if direction is left-to-right and left if direction is right-to-left.

left

The inline contents are aligned to the left edge of the line box.

right

The inline contents are aligned to the right edge of the line box.

center

The inline contents are centered within the line box.

justify

The inline contents are justified. Spaces out the content to line up its left and right edges to the left and right edges of the line box, except for the last line.

match-parent

Similar to inherit, but the values start and end are calculated according to the parent's direction and are replaced by the appropriate left or right value.

Accessibility

The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.

MDN Understanding WCAG, Guideline 1.4 explanations
Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0

Formal definition

Initial value	start, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.
Applies to	block containers
Inherited	yes
Computed value	as specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or right
Animation type	discrete

Formal syntax

Examples

Start alignment

HTML

html<p class="example"> Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula. </p>

CSS

css.example { text-align: start; border: solid; }

Result

Centered text

HTML

CSS

css.example { text-align: center; border: solid; }

Result

Example using "justify"

HTML

CSS

css.example { text-align: justify; border: solid; }

Result

Table alignment

This example demonstrates the use of text-align on <table> elements:

The <caption> is set to right-aligned.
The first two <th> elements inherit the left alignment from the text-align: left set on the <thead>, while the third is set to right-aligned.
Inside the <tbody> element, the first row is set to right-aligned, the second is set to center-aligned, and the third uses the default (left) alignment.
Within each row, some cells (c12, c31) are set to override the alignment of the row.

HTML

html<table> <caption> Example table </caption> <thead> <tr> <th>Col 1</th> <th>Col 2</th> <th class="right">Col 3</th> </tr> </thead> <tbody> <tr class="right"> <td>11</td> <td class="center">12</td> <td>13</td> </tr> <tr class="center"> <td>21</td> <td>22</td> <td>23</td> </tr> <tr id="r3"> <td class="right">31</td> <td>32</td> <td>33</td> </tr> </tbody> </table>

CSS

csstable { border-collapse: collapse; border: solid black 1px; width: 250px; height: 150px; } thead { text-align: left; } td, th { border: solid 1px black; } .center { text-align: center; } .right, caption { text-align: right; }

Result

Specifications

Specification
CSS Logical Properties and Values Level 1 # text-align
CSS Text Module Level 3 # text-align-property

Browser compatibility

BCD tables only load in the browser

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on Oct 2, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content

Từ khóa » Html Column Align Center

Try it

Syntax

Values

Accessibility

Formal definition

Formal syntax

Examples

Start alignment

HTML

CSS

Result

Centered text

HTML

CSS

Result

Example using "justify"

HTML

CSS

Result

Table alignment

HTML

CSS

Result

Specifications

Browser compatibility

See also

Help improve MDN

Liên Hệ