CSS 9 💻 text indent, vertical align, text align last, direction properties - KandZ

These CSS properties control the indentation, vertical alignment, last-line alignment, and text direction of elements, offering fine-grained control over text layout and readability.

Overview of Properties

Property	Description	Common Values
`text-indent`	Indents the first line of a block element	`40px`, `2em`, `10%`
`vertical-align`	Aligns inline/inline-block elements vertically	`baseline`, `middle`, `top`, `bottom`
`text-align-last`	Aligns the last line of text in a block	`left`, `center`, `right`, `justify`
`direction`	Sets text direction (LTR or RTL)	`ltr`, `rtl`

1. text-indent

The text-indent property controls the indentation of the first line of a block-level element.

p.indented {
    text-indent: 40px; /* Indent first line by 40px */
}

p.no-indent {
    text-indent: 0; /* No indentation */
}

p.relative-indent {
    text-indent: 2em; /* Indent by 2 × font size */
}

p.percentage-indent {
    text-indent: 10%; /* Indent by 10% of parent width */
}

Values

Value	Description	Example
`length`	Fixed indentation	`text-indent: 40px;`
`percentage`	Percentage of parent width	`text-indent: 10%;`
`0` / `none`	No indentation	`text-indent: 0;`

2. vertical-align

The vertical-align property aligns inline, inline-block, and table-cell elements vertically within their parent.

.container {
    vertical-align: middle; /* Centers content vertically */
}

.inline {
    display: inline-block;
    vertical-align: middle; /* Aligns inline-block elements */
}

/* Different alignment values */
.top-align {
    vertical-align: top;
}

.bottom-align {
    vertical-align: bottom;
}

.baseline-align {
    vertical-align: baseline; /* Default */
}

Values

Value	Description	Example
`baseline`	Aligns to the baseline (default)	`vertical-align: baseline;`
`top`	Aligns to the top of the parent	`vertical-align: top;`
`bottom`	Aligns to the bottom of the parent	`vertical-align: bottom;`
`middle`	Centers vertically	`vertical-align: middle;`
`text-top`	Aligns to the top of the text	`vertical-align: text-top;`
`text-bottom`	Aligns to the bottom of the text	`vertical-align: text-bottom;`
`sub`	Aligns as subscript	`vertical-align: sub;`
`super`	Aligns as superscript	`vertical-align: super;`

3. text-align-last

The text-align-last property controls the alignment of the last line of text in a block-level element.

p.left-aligned-last {
    text-align: justify;
    text-align-last: left; /* Last line aligned left */
}

p.right-aligned-last {
    text-align: justify;
    text-align-last: right; /* Last line aligned right */
}

p.center-aligned-last {
    text-align: justify;
    text-align-last: center; /* Last line centered */
}

Values

Value	Description	Example
`left`	Aligns the last line to the left	`text-align-last: left;`
`center`	Centers the last line	`text-align-last: center;`
`right`	Aligns the last line to the right	`text-align-last: right;`
`justify`	Justifies the last line	`text-align-last: justify;`
`start`	Aligns to the start of the text direction	`text-align-last: start;`
`end`	Aligns to the end of the text direction	`text-align-last: end;`

4. direction

The direction property sets the text direction within a block-level element.

div.ltr {
    direction: ltr; /* Left-to-right (default for English) */
}

div.rtl {
    direction: rtl; /* Right-to-left (for Arabic, Hebrew) */
}

Values

Value	Description	Example
`ltr`	Left-to-right (default)	`direction: ltr;`
`rtl`	Right-to-left	`direction: rtl;`

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-indent, vertical-align, text-align-last, direction</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .demo-box {
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
        }

        .demo-box.bordered {
            border: 2px solid #ddd;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* ====== TEXT INDENT DEMOS ====== */
        .ti-40px {
            text-indent: 40px;
        }

        .ti-2em {
            text-indent: 2em;
        }

        .ti-10p {
            text-indent: 10%;
        }

        .ti-none {
            text-indent: 0;
        }

        /* ====== VERTICAL ALIGN DEMOS ====== */
        .va-container {
            border: 2px solid #ddd;
            padding: 15px;
            height: 80px;
            background: #f8f9fa;
            border-radius: 8px;
            margin: 10px 0;
        }

        .va-container .va-child {
            display: inline-block;
            background: #007bff;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            margin: 0 5px;
        }

        .va-top .va-child {
            vertical-align: top;
        }

        .va-middle .va-child {
            vertical-align: middle;
        }

        .va-bottom .va-child {
            vertical-align: bottom;
        }

        .va-baseline .va-child {
            vertical-align: baseline;
        }

        .va-text-top .va-child {
            vertical-align: text-top;
        }

        .va-text-bottom .va-child {
            vertical-align: text-bottom;
        }

        /* ====== TEXT ALIGN LAST DEMOS ====== */
        .tal-left {
            text-align: justify;
            text-align-last: left;
        }

        .tal-center {
            text-align: justify;
            text-align-last: center;
        }

        .tal-right {
            text-align: justify;
            text-align-last: right;
        }

        .tal-justify {
            text-align: justify;
            text-align-last: justify;
        }

        /* ====== DIRECTION DEMOS ====== */
        .dir-ltr {
            direction: ltr;
        }

        .dir-rtl {
            direction: rtl;
        }

        .dir-rtl p {
            text-align: right;
        }
    </style>
</head>
<body>

    <h1>text-indent, vertical-align, text-align-last, direction</h1>

    <!-- ====== 1. TEXT INDENT ====== -->
    <section>
        <h2>1. text-indent</h2>

        <div class="demo-box bordered ti-40px">
            <strong>text-indent: 40px</strong><br>
            This paragraph has a left indentation of 40 pixels. The first line is indented to create a traditional paragraph style commonly used in books and articles.
        </div>

        <div class="demo-box bordered ti-2em">
            <strong>text-indent: 2em</strong><br>
            This paragraph has an indentation of 2em (2 × the current font size), making it relative to the text size.
        </div>

        <div class="demo-box bordered ti-10p">
            <strong>text-indent: 10%</strong><br>
            This paragraph has an indentation of 10% of the parent container's width, making it responsive to the container size.
        </div>

        <div class="demo-box bordered ti-none">
            <strong>text-indent: 0 (no indent)</strong><br>
            This paragraph does not have any indentation. The first line starts exactly at the left edge of the container.
        </div>

        <div class="code-block">
            text-indent: 40px;  /* Fixed indentation */
            text-indent: 2em;   /* Relative to font size */
            text-indent: 10%;   /* Percentage of parent width */
            text-indent: 0;     /* No indentation */
        </div>
    </section>

    <!-- ====== 2. VERTICAL ALIGN ====== -->
    <section>
        <h2>2. vertical-align</h2>

        <h3>top vs middle vs bottom</h3>
        <div class="va-container va-top">
            <span class="va-child" style="height: 30px;">top</span>
            <span class="va-child" style="height: 30px;">top</span>
            <span style="display: inline-block; font-size: 14px;">All aligned <strong>top</strong></span>
        </div>

        <div class="va-container va-middle">
            <span class="va-child" style="height: 30px;">middle</span>
            <span class="va-child" style="height: 30px;">middle</span>
            <span style="display: inline-block; font-size: 14px;">All aligned <strong>middle</strong></span>
        </div>

        <div class="va-container va-bottom">
            <span class="va-child" style="height: 30px;">bottom</span>
            <span class="va-child" style="height: 30px;">bottom</span>
            <span style="display: inline-block; font-size: 14px;">All aligned <strong>bottom</strong></span>
        </div>

        <h3>baseline vs text-top vs text-bottom</h3>
        <div class="va-container va-baseline">
            <span class="va-child" style="height: 30px;">baseline</span>
            <span style="display: inline-block; font-size: 24px;">Big Text</span>
            <span class="va-child" style="height: 30px;">baseline</span>
            <span style="display: inline-block; font-size: 14px;">Aligned to <strong>baseline</strong></span>
        </div>

        <div class="va-container va-text-top">
            <span class="va-child" style="height: 30px;">text-top</span>
            <span style="display: inline-block; font-size: 24px;">Big Text</span>
            <span class="va-child" style="height: 30px;">text-top</span>
            <span style="display: inline-block; font-size: 14px;">Aligned to <strong>text-top</strong></span>
        </div>

        <div class="va-container va-text-bottom">
            <span class="va-child" style="height: 30px;">text-bottom</span>
            <span style="display: inline-block; font-size: 24px;">Big Text</span>
            <span class="va-child" style="height: 30px;">text-bottom</span>
            <span style="display: inline-block; font-size: 14px;">Aligned to <strong>text-bottom</strong></span>
        </div>

        <div class="code-block">
            vertical-align: top;          /* Aligns to the top */
            vertical-align: middle;       /* Centers vertically */
            vertical-align: bottom;       /* Aligns to the bottom */
            vertical-align: baseline;     /* Aligns to the baseline (default) */
            vertical-align: text-top;     /* Aligns to the top of the text */
            vertical-align: text-bottom;  /* Aligns to the bottom of the text */
        </div>
    </section>

    <!-- ====== 3. TEXT ALIGN LAST ====== -->
    <section>
        <h2>3. text-align-last</h2>

        <div class="grid-2">
            <div class="demo-box bordered tal-left">
                <strong>text-align-last: left</strong><br>
                This paragraph is justified, but the last line is aligned to the left. It's quite long and has a bunch of words to demonstrate how this property works. The last line will be left-aligned while the rest are justified.
            </div>

            <div class="demo-box bordered tal-center">
                <strong>text-align-last: center</strong><br>
                This paragraph is justified, but the last line is centered. It's quite long and has a bunch of words to demonstrate how this property works. The last line will be centered while the rest are justified.
            </div>

            <div class="demo-box bordered tal-right">
                <strong>text-align-last: right</strong><br>
                This paragraph is justified, but the last line is aligned to the right. It's quite long and has a bunch of words to demonstrate how this property works. The last line will be right-aligned while the rest are justified.
            </div>

            <div class="demo-box bordered tal-justify">
                <strong>text-align-last: justify</strong><br>
                This paragraph is justified, and the last line is also justified. It's quite long and has a bunch of words to demonstrate how this property works. The last line is spread across the full width.
            </div>
        </div>

        <div class="code-block">
            text-align-last: left;     /* Last line aligned left */
            text-align-last: center;   /* Last line centered */
            text-align-last: right;    /* Last line aligned right */
            text-align-last: justify;  /* Last line justified */
        </div>
    </section>

    <!-- ====== 4. DIRECTION ====== -->
    <section>
        <h2>4. direction</h2>

        <div class="grid-2">
            <div class="demo-box bordered dir-ltr">
                <strong>direction: ltr (Left-to-Right)</strong><br>
                This is a left-to-right language (e.g., English) block. The text reads from left to right, which is the default direction for most languages.
            </div>

            <div class="demo-box bordered dir-rtl">
                <strong>direction: rtl (Right-to-Left)</strong><br>
                هذا هو نص من اليمين إلى اليسار (مثل العربية أو العبرية). يتم محاذاة النص إلى اليمين ويقرأ من اليمين إلى اليسار.
                <br><br>
                <span style="font-size: 0.9rem; color: #6c757d;">
                    (This is right-to-left text, like Arabic or Hebrew. It is aligned to the right and reads from right to left.)
                </span>
            </div>
        </div>

        <div class="code-block">
            direction: ltr;  /* Left-to-right (default for English) */
            direction: rtl;  /* Right-to-left (for Arabic, Hebrew) */
        </div>
    </section>

    <!-- ====== 5. COMBINED EXAMPLES ====== -->
    <section>
        <h2>5. Combined Examples</h2>

        <div class="demo-box bordered" style="text-indent: 2em; text-align: justify; text-align-last: center; direction: ltr;">
            <strong>Combined: text-indent: 2em + text-align: justify + text-align-last: center</strong><br>
            This paragraph combines multiple text formatting properties. The first line is indented, the text is justified, and the last line is centered. This creates a unique and visually interesting layout.
        </div>

        <div class="demo-box bordered dir-rtl" style="text-indent: 2em; text-align: justify; text-align-last: center;">
            <strong>Combined: RTL + text-indent + justify</strong><br>
            هذا النص يجمع بين الاتجاه من اليمين إلى اليسار مع المسافة البادئة والتبرير والمحاذاة المركزية للسطر الأخير. هذا يوضح كيف تعمل هذه الخصائص معًا في اللغات ذات الاتجاه المختلف.
            <br><br>
            <span style="font-size: 0.9rem; color: #6c757d; direction: ltr;">
                (This text combines RTL direction with indentation, justification, and centered last-line alignment.)
            </span>
        </div>
    </section>

    <!-- ====== REFERENCE TABLES ====== -->
    <section>
        <h2>6. Reference Tables</h2>

        <h3>text-indent Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>length</code></td>
                <td>Fixed indentation (px, em, etc.)</td>
                <td><code>text-indent: 40px;</code></td>
            </tr>
            <tr>
                <td><code>percentage</code></td>
                <td>Percentage of parent width</td>
                <td><code>text-indent: 10%;</code></td>
            </tr>
            <tr>
                <td><code>0</code></td>
                <td>No indentation</td>
                <td><code>text-indent: 0;</code></td>
            </tr>
        </table>

        <h3>vertical-align Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>baseline</code></td>
                <td>Aligns to the baseline (default)</td>
                <td><code>vertical-align: baseline;</code></td>
            </tr>
            <tr>
                <td><code>top</code></td>
                <td>Aligns to the top</td>
                <td><code>vertical-align: top;</code></td>
            </tr>
            <tr>
                <td><code>middle</code></td>
                <td>Centers vertically</td>
                <td><code>vertical-align: middle;</code></td>
            </tr>
            <tr>
                <td><code>bottom</code></td>
                <td>Aligns to the bottom</td>
                <td><code>vertical-align: bottom;</code></td>
            </tr>
            <tr>
                <td><code>text-top</code></td>
                <td>Aligns to the top of the text</td>
                <td><code>vertical-align: text-top;</code></td>
            </tr>
            <tr>
                <td><code>text-bottom</code></td>
                <td>Aligns to the bottom of the text</td>
                <td><code>vertical-align: text-bottom;</code></td>
            </tr>
            <tr>
                <td><code>sub</code></td>
                <td>Aligns as subscript</td>
                <td><code>vertical-align: sub;</code></td>
            </tr>
            <tr>
                <td><code>super</code></td>
                <td>Aligns as superscript</td>
                <td><code>vertical-align: super;</code></td>
            </tr>
        </table>

        <h3>text-align-last Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>left</code></td>
                <td>Last line aligned left</td>
                <td><code>text-align-last: left;</code></td>
            </tr>
            <tr>
                <td><code>center</code></td>
                <td>Last line centered</td>
                <td><code>text-align-last: center;</code></td>
            </tr>
            <tr>
                <td><code>right</code></td>
                <td>Last line aligned right</td>
                <td><code>text-align-last: right;</code></td>
            </tr>
            <tr>
                <td><code>justify</code></td>
                <td>Last line justified</td>
                <td><code>text-align-last: justify;</code></td>
            </tr>
        </table>

        <h3>direction Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>ltr</code></td>
                <td>Left-to-right (default)</td>
                <td><code>direction: ltr;</code></td>
            </tr>
            <tr>
                <td><code>rtl</code></td>
                <td>Right-to-left</td>
                <td><code>direction: rtl;</code></td>
            </tr>
        </table>
    </section>

</body>
</html>

Quick Reference

Property	Description	Common Values
`text-indent`	Indents the first line of a block	`40px`, `2em`, `10%`
`vertical-align`	Aligns inline/inline-block elements vertically	`baseline`, `middle`, `top`, `bottom`
`text-align-last`	Aligns the last line of a block	`left`, `center`, `right`, `justify`
`direction`	Sets text direction	`ltr`, `rtl`

Best Practices

✅ Do This:

/* Use text-indent for paragraphs in articles */
.article p {
    text-indent: 2em;
}

/* Use vertical-align: middle for icons next to text */
.icon {
    vertical-align: middle;
}

/* Use text-align-last for justified text blocks */
.justified-text {
    text-align: justify;
    text-align-last: left;
}

❌ Don’t Do This:

/* Don't use text-indent for all paragraphs */
p { text-indent: 2em; }  /* May look odd for short paragraphs */

/* Don't use vertical-align for block elements */
div { vertical-align: middle; }  /* Only works for inline/inline-block */

/* Don't use direction: rtl without proper text */
.english { direction: rtl; }  /* Only use for RTL languages */

Pro Tip: Use text-indent to create traditional paragraph styles in long-form content. Use vertical-align: middle to align icons or small elements with text. Use text-align-last when working with justified text to control the appearance of the last line. Use direction: rtl only for languages that are naturally right-to-left, such as Arabic or Hebrew!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

Overview of Properties

1. text-indent

Values

2. vertical-align

Values

3. text-align-last

Values

4. direction

Values

Complete Example

Quick Reference

Best Practices

Ads Blocker Detected!!!