# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/vertical-align.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";

export const title = "vertical-align";
export const description = "Utilities for controlling the vertical alignment of an inline or table-cell box.";

<ApiTable
  rows={[
    ["align-baseline", "vertical-align: baseline;"],
    ["align-top", "vertical-align: top;"],
    ["align-middle", "vertical-align: middle;"],
    ["align-bottom", "vertical-align: bottom;"],
    ["align-text-top", "vertical-align: text-top;"],
    ["align-text-bottom", "vertical-align: text-bottom;"],
    ["align-sub", "vertical-align: sub;"],
    ["align-super", "vertical-align: super;"],
    ["align-(<custom-property>)", "vertical-align: var(<custom-property>);"],
    ["align-[<value>]", "vertical-align: <value>;"],
  ]}
/>

## Examples

### Aligning to baseline

Use the `align-baseline` utility to align the baseline of an element with the baseline of its parent:

<Figure>

<Example>
  {
    <div className="relative mx-auto max-w-md leading-none">
      <span className="inline-block h-8 w-0 align-baseline">
        <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span>
        <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span>
      </span>
      <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
        The quick brown fox jumps over the lazy dog.
      </span>
    </div>
  }
</Example>

```html
<!-- [!code classes:align-baseline] -->
<span class="inline-block align-baseline">The quick brown fox...</span>
```

</Figure>

### Aligning to top

Use the `align-top` utility to align the top of an element and its descendants with the top of the entire line:

<Figure>

<Example>
  {
    <div className="relative mx-auto max-w-md leading-none">
      <span className="inline-block h-8 w-0 align-top">
        <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span>
        <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span>
      </span>
      <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
        The quick brown fox jumps over the lazy dog.
      </span>
    </div>
  }
</Example>

```html
<!-- [!code classes:align-top] -->
<span class="inline-block align-top">The quick brown fox...</span>
```

</Figure>

### Aligning to middle

Use the `align-middle` utility to align the middle of an element with the baseline plus half the x-height of the parent:

<Figure>

<Example>
  {
    <div className="relative mx-auto max-w-md leading-none">
      <span className="inline-block h-8 w-0 align-middle">
        <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span>
        <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span>
      </span>
      <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
        The quick brown fox jumps over the lazy dog.
      </span>
    </div>
  }
</Example>

```html
<!-- [!code classes:align-middle] -->
<span class="inline-block align-middle">The quick brown fox...</span>
```

</Figure>

### Aligning to bottom

Use the `align-bottom` utility to align the bottom of an element and its descendants with the bottom of the entire line:

<Figure>

<Example>
  {
    <div className="relative mx-auto max-w-md leading-none">
      <span className="inline-block h-8 w-0 align-bottom">
        <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span>
        <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span>
      </span>
      <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
        The quick brown fox jumps over the lazy dog.
      </span>
    </div>
  }
</Example>

```html
<!-- [!code classes:align-bottom] -->
<span class="inline-block align-bottom">The quick brown fox...</span>
```

</Figure>

### Aligning to parent top

Use the `align-text-top` utility to align the top of an element with the top of the parent element's font:

<Figure>

<Example>
  {
    <div className="relative mx-auto max-w-md leading-none">
      <span className="inline-block h-8 w-0 align-text-top">
        <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span>
        <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span>
      </span>
      <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
        The quick brown fox jumps over the lazy dog.
      </span>
    </div>
  }
</Example>

```html
<!-- [!code classes:align-text-top] -->
<span class="inline-block align-text-top">The quick brown fox...</span>
```

</Figure>

### Aligning to parent bottom

Use the `align-text-bottom` utility to align the bottom of an element with the bottom of the parent element's font:

<Figure>

<Example>
  {
    <div className="relative mx-auto max-w-md leading-none">
      <span className="inline-block h-8 w-0 align-text-bottom">
        <span className="absolute top-0 h-8 w-full border-t border-b border-dashed border-pink-400/50"></span>
        <span className="absolute top-0 h-4 w-full border-b border-dashed border-pink-400/50"></span>
      </span>
      <span className="relative z-10 px-4 font-medium text-gray-700 dark:text-gray-200">
        The quick brown fox jumps over the lazy dog.
      </span>
    </div>
  }
</Example>

```html
<!-- [!code classes:align-text-bottom] -->
<span class="inline-block align-text-bottom">The quick brown fox...</span>
```

</Figure>

### Using a custom value

<UsingACustomValue element="span" utility="align" name="vertical alignment" value="4px" variable="alignment" />

### Responsive design

<ResponsiveDesign element="span" property="vertical-align" defaultClass="align-middle" featuredClass="align-top" />