CODEWITHSUNDEEP
markdowndocusaurus
SoftTimur
SoftTimur

Reputation: 5490

Center a hyperlink or an image in Docusaurus

I'm building a website with Docusaurus V2.

I have a file link:

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

Now, I want to put that link in the center (traditionally with text-align: center).

I tried the following code:

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>

It returned this:

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

Does anyone know what's the easiest way to center a hyperlink (or an image)?

Upvotes: 7

Views: 5376

Answers (2)

Yash Panchal
Yash Panchal

Reputation: 11

Use this one it is pretty simple.

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

Everything will be centered vertically.

Upvotes: -2

Yangshun Tay
Yangshun Tay

Reputation: 53119

The easiest way is to avoid using Markdown altogether. I'll outline the various approaches:

1. Use plain HTML and CSS

This is the most basic solution and definitely works.

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

2. Use Infima utlity class

Docusaurus classic template ships with Infima which has a useful class to center stuff. This is similar to approach #1 but requires Infima styles to be present.

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

3. Use plain HTML with Markdown

You seem to be using an incorrect syntax for images and were using the link syntax. You need an exclamation mark before the [].

Also note the empty lines before and after the Markdown syntax for image. As we're using MDX, putting empty lines around block chunks will allow them to be parsed as Markdown by the MDX engine instead of being treated as HTML.

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

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

</div>

Upvotes: 12

Related Questions