在 Docusaurus 中将超链接或图像居中

Question

建立一个网站

我有一个文件link：

[10Studio-Sample-EN.xlsx](https://www.10studio.tech/files/10Studio-Sample-EN.xlsx)

现在，我想把 link 放在中间（传统上是 text-align: center）。

我尝试了以下代码：

export const Center = ({children}) => (
   <div
      style={{
         "textAlign": "center"
      }}>
      {children}
   </div>
)

<Center>hahahaha</Center>
<Center>[10Studio-Sample-EN.xlsx](https://www.10studio.tech/files/10Studio-Sample-EN.xlsx)</Center>

它返回了这个：

有谁知道将 hyperlink（或图像）居中的最简单方法是什么？

Answer 1

最简单的方法是完全避免使用 Markdown。我将概述各种方法：

1。使用普通 HTML 和 CSS

这是最基本的解决方案，绝对有效。

<div style={{textAlign: 'center'}}>
  <img src="..." />
</div>

2。使用 Infima 实用程序 class

Docusaurus classic 模板随 Infima 一起提供，它具有有用的 class 居中内容。这类似于方法 #1，但需要存在 Infima 样式。

<div class="text--center">
  <img src="..." />
</div>

3。使用普通 HTML 和 Markdown

您似乎对图像使用了不正确的语法并且使用了 link 语法。 [].

前需要一个感叹号

还要注意图像的 Markdown 语法前后的空行。当我们使用 MDX 时，在块周围放置空行将允许它们被 MDX 引擎解析为 Markdown，而不是被视为 HTML.

<div style={{textAlign: 'center'}}>

![image](/path/to/image.jpg)

</div>

Answer 2

用这个很简单

<center>
<img src="..."></img>
</center>

所有内容都将垂直居中。

在 Docusaurus 中将超链接或图像居中

Center a hyperlink or an image in Docusaurus

markdown

docusaurus

1。使用普通 HTML 和 CSS

2。使用 Infima 实用程序 class

3。使用普通 HTML 和 Markdown