# 图像对齐和网格
**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:** 20
**Page:** 1
### Author:  [@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")
| | | |
| --- | --- | --- |
| ℹ | **摘要** | 向编辑器工具栏添加图片网格和对齐按钮 |
| 🛠 | **代码仓库** | [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) |
安装此主题组件
此主题组件在帖子编辑器工具栏中插入按钮，用于将上传的图片与文本左对齐或右对齐、居中对齐，或使用新实现的网格标签将多张图片对齐成网格。网格将根据图片的数量和各自的尺寸自动调整大小，并且还会链接到上传的较大版本。一个帖子中可以多次使用这些按钮/对齐功能，以创建各种布局。 桌面和移动视图均适用。 🙂
要使用，只需点击所需的图片对齐按钮，然后将图片上传到结果标签之间的指定位置（由占位符文本标记，该文本可在组件设置中编辑）。
请注意，此组件的网格部分用于对齐上传的图片，而不是图片链接（其他对齐选项可用于链接图片）。
* * *
### 截图
> **编辑器工具栏网格按钮（附带网格代码示例）**
>
> 
> **图片网格示例**
>
> 
> **编辑器工具栏右对齐按钮（附带右对齐代码示例）**
>
> 
> **图片在文本右侧对齐**
>
> 
> **编辑器工具栏左对齐按钮（附带左对齐代码示例）**
>
> 
> **图片在文本左侧对齐**
>
> 
> **编辑器工具栏居中对齐按钮（附带居中对齐代码示例）**
>
> 
> **图片居中对齐（带文本）**
>
> 
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年七月13日 17:32 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/2 "2023-07-13T17:32:35Z")
已添加用于居中图像的按钮。
---
### Author:  [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [2023年七月13日 20:20 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/3 "2023-07-13T20:20:49Z")
很棒的工具！您能展示一下它在编辑器中的样子吗？
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年七月13日 20:51 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/4 "2023-07-13T20:51:09Z")
谢谢你 @piffy！ 🙂
> [@piffy](#):
>
> Can you show what it looks like in the editor?
你的意思是带工具栏的编辑器吗？那就是带有网格示例的第一个截图。我将添加一些关于图片周围其他对齐代码的编辑器截图。
---
### Author:  [@thoka](https://meta.discourse.org/u/thoka)
#### Post date: [2023年七月14日 05:43 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/5 "2023-07-14T05:43:38Z")
感谢您为 [Image Alignment](https://meta.discourse.org/t/image-alignment/15408) 提供的此解决方案
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2023年九月13日 19:47 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/6 "2023-09-13T19:47:46Z")
> [@Lilly](#):
>
> 右对齐按钮（附带右对齐代码示例）
>
> 
很棒的组件！我正想问类似的问题！
你真是个摇滚明星，制作了有价值的附加组件！
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年九月13日 19:58 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/7 "2023-09-13T19:58:59Z")
> [@Heliosurge](#):
>
> 你真是个摇滚明星，做出了有价值的附加组件！
谢谢你，Dan，我很感激你的赞美，很高兴你觉得它们有用 🙂
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2023年九月14日 01:12 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/8 "2023-09-14T01:12:30Z")
不客气。请问您是如何让“Align left”等内容显示为粗体的？我尝试使用 Markdown，但它显示的是 Markdown 代码。
我看到使用 `###` 可以实现，但标准的粗体使用
```plaintext
**Text**
```
似乎不起作用。
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年九月14日 01:42 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/9 "2023-09-14T01:42:19Z")
我不确定我是否明白你的意思 @Heliosurge？
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2023年九月14日 03:18 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/10 "2023-09-14T03:18:52Z")
抱歉，我之前尝试时它不起作用。不确定有什么变化。这真的很棒，谢谢。
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2023年九月14日 04:34 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/11 "2023-09-14T04:34:14Z")
如果您使用多张图片，我会遇到此问题。
来自此代码。我该如何让信息固定在每张图片旁边？Shawn 的信息应该在第二张图片旁边。
我该如何修复？
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年九月14日 04:49 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/12 "2023-09-14T04:49:59Z")
只需在第一个文本块和第二个 `` 标签之间插入一些 `
` HTML 标签，直到它正确地间隔开。我将找时间在其中编程一个硬回车或类似的东西。
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2023年九月14日 05:22 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/13 "2023-09-14T05:22:48Z")
太棒了，那就添加 `
` 的数量，直到文本与相应的图片对齐。
再次感谢您的帮助，以及如此出色的 #Customization > Theme component！
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年九月14日 07:04 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/14 "2023-09-14T07:04:08Z")
我认为这不是一种可靠的方法，因为内容的高度会因窗口大小的不同而异。
清除浮动元素，当旁边有任意内容时，会很棘手。我不确定这里有什么明显的解决方案……\[1\]
这在 WordPress 编辑器中也是一个长期存在的问题。
人们倾向于依赖一些不自然的解决方法，使用那些唯一目的是重置先前浮动元素的 `clear: both;` 属性的元素。
* * *
1. 直到 don 出现 🙃
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年九月14日 07:07 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/15 "2023-09-14T07:07:10Z")
> [@Canapin](#):
>
> 我认为这不是一个可靠的方法，因为内容的高度会因窗口大小的不同而异。
>
> 清除浮动，当有任意内容在其旁边时，这是棘手的。我不确定这里有什么明显的解决方案……\[1\]
是的，我也不喜欢那种方法。我曾考虑过尝试使用空白属性解决方案。🤔 最终，如果对齐的图片是单独的帖子，效果最好。不幸的是，表格中的图片效果也不太好。
* * *
1. 直到 don 出现 🙃
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年九月14日 07:15 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/16 "2023-09-14T07:15:25Z")
也许你可以探索除浮动（float）之外的其他解决方案。
我尝试用 `flex` 替换 `float`…… 🤔 还没深入研究。
```scss
[data-theme-image=left] {
display: flex;
float: none;
}
[data-theme-image=right] {
display: flex;
float: none;
justify-content: flex-end;
}
```
```scss
[data-theme-image=left] {
display: flex;
float: none;
}
[data-theme-image=right] {
display: flex;
float: none;
flex-direction: row-reverse;
}
```
或者可以看看网格布局（grid layout）？不过我对它一无所知。我的 CSS 知识已经过时好几年了。 🧓
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年九月14日 07:17 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/17 "2023-09-14T07:17:36Z")
> [@Canapin](#):
>
> 或者看看网格布局？我对它一无所知。我的 CSS 知识已经是很久以前的了。 🧓
哈哈，网格选项是这个主题组件的一部分 😁
我也绝对认为我的更老 🤯。
那是什么？饼干？我分不清它们是土豆还是饺子还是某种饼干。 😅
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年九月14日 07:24 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/18 "2023-09-14T07:24:45Z")
我昨天做了[大福麻糬](https://en.wikipedia.org/wiki/Daifuku)，里面填了自制的[红豆沙](https://en.wikipedia.org/wiki/Red_bean_paste)。
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [2023年九月14日 15:23 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/19 "2023-09-14T15:23:10Z")
尝试了那些 flex 对齐属性的解决方案，但都无法找到一个始终可行的办法。不过，我确实找到了一个可行的变通方法。如果你将每个图片-文本部分都设置为块引用，它就会将它们分开（但会包含文本的引用格式）：
编辑器/预览器：
结果：
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年九月15日 14:46 UTC](https://meta.discourse.org/t/image-alignment-and-grid/271560/20 "2023-09-15T14:46:56Z")
这是因为``在Discourse中包含`clear: both;`。
[下一頁](https://meta.discourse.org/t/image-alignment-and-grid/271560.md?page=2)