{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-vertical-align/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"0e79575c-2af9-55d2-8e3f-d24f1bb7720a","title":"Tailwind CSS Vertical Align","slug":"/classes/tailwind-vertical-align/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"9 May 2024\",\n  \"title\": \"Tailwind CSS Vertical Align\",\n  \"metaTitle\": \"Tailwind CSS Vertical Align\",\n  \"metaDescription\": \"The vertical-align utility class in Tailwind CSS allows you to control the vertical alignment of inline or inline-block elements.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-vertical-align\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Vertical Align\"), mdx(\"p\", null, \"The vertical-align utility class in Tailwind CSS allows you to control the vertical alignment of inline or inline-block elements. With Tailwind's vertical-align class, you can easily adjust the vertical position of elements within their containing elements.\"), mdx(\"h2\", null, \"Applying Tailwind Vertical Align\"), mdx(\"p\", null, \"To apply a specific vertical alignment to an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"align-{value}\"), \" utility class, where {value} represents the desired vertical alignment. Here are some common values you can use:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"align-baseline: Aligns the element's baseline with the baseline of its parent.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"align-top: Aligns the element's top edge with the top edge of its parent.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"align-middle: Aligns the element vertically in the middle of its parent.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"align-bottom: Aligns the element's bottom edge with the bottom edge of its parent.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"align-text-top: Aligns the element's top edge with the top edge of the parent's text.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"align-text-bottom: Aligns the element's bottom edge with the bottom edge of the parent's text.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"align-middle\\\">\\n  <!-- Content here -->\\n  On a bright sunny day, as the gentle breeze rustled the leaves on the trees, Sarah walked along\\n  the winding path in the park. The vibrant colors of the flowers caught her attention, filling her\\n  heart with joy. Birds chirped happily in the distance, creating a melodious symphony of nature.\\n  Sarah took a deep breath, inhaling the sweet scent of blooming roses, and felt a sense of\\n  tranquility wash over her\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-purple-100 p-4\"\n  }, mdx(\"div\", {\n    className: \"align-middle max-w-xs px-6 py-4 mx-auto bg-purple-200 text-purple-500 font-medium rounded-lg\"\n  }, \"On a bright sunny day, as the gentle breeze rustled the leaves on the trees, Sarah walked along the winding path in the park. The vibrant colors of the flowers caught her attention, filling her heart with joy. Birds chirped happily in the distance, creating a melodious symphony of nature. Sarah took a deep breath, inhaling the sweet scent of blooming roses, and felt a sense of tranquility wash over her.\")), mdx(\"h2\", null, \"Responsive Vertical Align\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply vertical align classes responsively at different breakpoints. To use responsive vertical align classes, you can append the breakpoint prefix to the utility class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:align-top\"), \" aligns the element's top edge with the top edge of its parent starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"align-bottom md:align-middle\\\">\\n  <!-- Content here -->\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-blue-100 p-4\"\n  }, mdx(\"div\", {\n    className: \"align-bottom md:align-middle max-w-xs px-6 py-4 mx-auto bg-blue-500 text-white font-medium rounded-lg\"\n  }, \"On a bright sunny day, as the gentle breeze rustled the leaves on the trees, Sarah walked along the winding path in the park.\")), mdx(\"p\", null, \"In the above example, the vertical alignment of the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element is set to align at the bottom by default (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"align-bottom\"), \"), but starting from the medium breakpoint and above, it changes to align in the middle (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:align-middle\"), \").\"), mdx(\"h2\", null, \"Tailwind Vertical Align Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-baseline\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"vertical-align: baseline;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-top\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"vertical-align: top;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-middle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"vertical-align: middle;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-bottom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"vertical-align: bottom;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-text-top\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"vertical-align: text-top;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-text-bottom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"vertical-align: text-bottom;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-sub\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"vertical-align: sub;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"align-super\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"vertical-align: super;\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=header16\"\n  }, \"landing page\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-vertical-align","title":"Tailwind Vertical Align","items":[{"url":"#applying-tailwind-vertical-align","title":"Applying Tailwind Vertical Align"},{"url":"#preview","title":"Preview"},{"url":"#responsive-vertical-align","title":"Responsive Vertical Align"},{"url":"#preview-1","title":"Preview"},{"url":"#tailwind-vertical-align-class-table","title":"Tailwind Vertical Align Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-vertical-align.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Vertical Align","lastUpdated":"9 May 2024","metaDescription":"The vertical-align utility class in Tailwind CSS allows you to control the vertical alignment of inline or inline-block elements."}}},"pageContext":{"id":"0e79575c-2af9-55d2-8e3f-d24f1bb7720a"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}