Hopiu/bootstrap
1
0
Fork 0
mirror of https://github.com/Hopiu/bootstrap.git synced 2026-03-27 17:50:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
bootstrap/site/content/docs/5.0/utilities/vertical-align.md
Mark Otto 4c7a3e8adf
Add Sass docs (variables, mixins, and loops) to most pages (#32747) 
* WIP: Mention variables, mixins, and loops in docs

* Add Sass sections to component pages

* add sass docs for forms and content

* Update buttons.md

* Remove empty mixins sections

* Massive update to utilities and some consistency changes

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-02-10 19:29:59 -08:00

1.7 KiB
Raw Blame History

layout title description group
docs Vertical alignment Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements. utilities

Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

To vertically center non-inline content (like <div>s and more), use our [flex box utilities]({{< docsref "/utilities/flex#align-items" >}}).

With inline elements:

{{< example >}} baseline top middle bottom text-top text-bottom {{< /example >}}

With table cells:

{{< example >}}

baseline top middle bottom text-top text-bottom
{{< /example >}}

Sass

Utilities API

Vertical align utilities are declared in our utilities API in scss/_utilities.scss. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

{{< scss-docs name="utils-vertical-align" file="scss/_utilities.scss" >}}