Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-24 10:48:14 +04:00
Code Issues Projects Releases Wiki Activity

Docs fixes: Remove duplicated code examples, fix links, fix filled icons, fix dropdown examples

Browse Source 
Co-authored-by: ethancrawford <ethan_jc@hotmail.com>
This commit is contained in:
BG-Software
2025-05-08 21:53:47 +02:00
committed by GitHub
parent 8470c9b315
commit 5b3e201d06
32 changed files with 59 additions and 634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
docs/content/ui/utilities/vertical-align.md
View File

@@ -10,15 +10,6 @@ Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `
Use vertical alignment utilities to align inline-level elements relative to their surrounding text or baseline. These classes are particularly useful for aligning small inline elements like icons or badges alongside text.
```html
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
```
{% capture html -%}
<div>
<span class="align-baseline">baseline</span>
@@ -35,33 +26,18 @@ Use vertical alignment utilities to align inline-level elements relative to thei
Vertical alignment utilities are also applicable to table cells, allowing you to control the alignment of content within a cell. This is especially useful for creating well-structured and visually appealing tables where the content aligns consistently across rows and columns.
```html
<table>
{% capture html -%}
<table style="height: 100px" class="bg-surface">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
<td class="align-baseline border">baseline</td>
<td class="align-top border">top</td>
<td class="align-middle border">middle</td>
<td class="align-bottom border">bottom</td>
<td class="align-text-top border">text-top</td>
<td class="align-text-bottom border">text-bottom</td>
</tr>
</tbody>
</table>
```
```html example
<table style="height: 100px">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
```
{%- endcapture %}
{% include "docs/example.html" html=html %}