# 图像对齐和网格

**URL:** https://meta.discourse.org/t/image-alignment-and-grid/271560
**Category:** Theme component
**Tags:** deprecated
**Created:** [2023年七月13日 17:10 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560 "2023-07-13T17:10:37Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年七月13日 17:10 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/1 "2023-07-13T17:10:37Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **摘要** | 向编辑器工具栏添加图片网格和对齐按钮 |
| 🛠 | **代码仓库** | [https://github.com/Lillinator/image-alignment](https://github.com/Lillinator/image-alignment) |
| ❓ | **安装指南** | [如何安装主题或主题组件](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **Discourse 主题新手？** | [Discourse 主题使用入门指南](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

安装此主题组件

此主题组件在帖子编辑器工具栏中插入按钮，用于将上传的图片与文本左对齐或右对齐、居中对齐，或使用新实现的网格标签将多张图片对齐成网格。网格将根据图片的数量和各自的尺寸自动调整大小，并且还会链接到上传的较大版本。一个帖子中可以多次使用这些按钮/对齐功能，以创建各种布局。 桌面和移动视图均适用。 🙂

要使用，只需点击所需的图片对齐按钮，然后将图片上传到结果标签之间的指定位置（由占位符文本标记，该文本可在组件设置中编辑）。

请注意，此组件的网格部分用于对齐上传的图片，而不是图片链接（其他对齐选项可用于链接图片）。

* * *

### 截图

> **编辑器工具栏网格按钮（附带网格代码示例）**
>
> ![IMG_3719](https://global.discourse-cdn.com/meta/original/4X/4/9/e/49edf383e5dc891f8b934f2173a045bc184355c3.jpeg)

> **图片网格示例**
>
> ![IMG_3713](https://global.discourse-cdn.com/meta/original/4X/3/4/4/34455851b1c978110393d4647d9e4b74e5818df9.jpeg)

> **编辑器工具栏右对齐按钮（附带右对齐代码示例）**
>
> ![IMG_3717](https://global.discourse-cdn.com/meta/original/4X/c/2/b/c2b227f8c0780cd1bbec77017fae9558fa896a06.jpeg)

> **图片在文本右侧对齐**
>
> ![IMG_3708](https://global.discourse-cdn.com/meta/original/4X/1/0/2/102ce5938ec472c00684e146531576fae8cae9d9.jpeg)

> **编辑器工具栏左对齐按钮（附带左对齐代码示例）**
>
> ![IMG_3718](https://global.discourse-cdn.com/meta/original/4X/f/5/0/f504b371937000704e8e0ed536fc12ca05ebc79c.jpeg)

> **图片在文本左侧对齐**
>
> ![IMG_3711](https://global.discourse-cdn.com/meta/original/4X/b/b/7/bb7e0f0a9040e23e7f02d1a42b1af6425c4aa4fd.jpeg)

> **编辑器工具栏居中对齐按钮（附带居中对齐代码示例）**
>
> ![IMG_3720](https://global.discourse-cdn.com/meta/original/4X/a/8/c/a8c780a10ed588d391bd7098876d2855e2a61165.jpeg)

> **图片居中对齐（带文本）**
>
> ![IMG_3714](https://global.discourse-cdn.com/meta/original/4X/4/8/7/4876d5852350dc0207e68e27bbf23c218f783e13.jpeg)

---

_[View the full topic](https://meta.discourse.org/t/image-alignment-and-grid/271560)._