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

Question

我将使用Docusaurus V2构建一个网站。

我有一个文件链接：

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

现在，我想把那个链接放在中间（传统上使用 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>

它返回了这个：

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

有人知道如何最简单地居中链接（或图片）吗？

- SoftTimur

Answer 1

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

1. 使用纯HTML和CSS

这是最基本的解决方案，绝对可行。

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

2. 使用Infima实用类

Docusaurus经典模板自带Infima实用程序，其中包含一个有用的类来居中元素。这类似于方法＃1，但需要存在Infima样式。

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

3. 使用纯HTML和Markdown

您似乎在使用图片时使用了错误的语法，并使用了链接语法。您需要在[]前加上感叹号。

此外，请注意Markdown语法前后的空行。由于我们正在使用MDX，因此在块级块周围放置空行将允许MDX引擎将其解析为Markdown，而不是将其视为HTML。

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

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

</div>

- Yangshun Tay

Answer 2

使用这个，它非常简单。

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

所有内容都将垂直居中。

- Yash Panchal

---

虽然这段代码可能回答了问题，但是提供关于为什么和/或如何回答问题的额外上下文可以提高其长期价值。 - Abhishek Dutt

在HTML5中不支持<center>标签，请避免使用它。 - Marcos R

在HTML5中不支持<center>标签，请避免使用它。 - undefined