<br>
- 옵시디언(Obsidian)은 마크다운(Markdown)을 지원해서 기본적으로 이미지 정렬을 지원하지 않는다.
- 기본으로 이미지는 왼쪽에 정렬된다.
- 하지만, CSS 스니펫(snippets)을 통해 이미지를 가운데나 오른쪽에 정렬시킬 수 있다.
<br>
### 옵시디언에서 이미지를 정렬하는 방법
#### 1. CSS 스니펫(snippets)에 정렬 코드 추가
CSS 스니펫을 통해 커스텀 폰트, 이미지 정렬 등 마크다운에서 할 수 없는 기능을 스타일 시트 언어인 [CSS](https://namu.wiki/w/CSS)로 할 수 있다. CSS 파일은 /vault이름/.obsidian/snippets 폴더 아래 저장된다. Notepad, Sublime Text와 같은텍스트 편집기를 이용해서 파일을 만들거나 수정하면 된다.
이미 사용하는 CSS 파일이 있으면, 아래와 같이 사용하고 있던 코드 아래에 이미지를 정렬하는 부분을 추가한다.(/\* image center align \*/와 /\* image right align \*/ 부분)
파일이 없으면 image_align.css 와 같은 이름으로 새로 만들고, 아래 설정에서 CSS 스니펫을 활성화해 준다.
- 설정(Options) → 테마(Appearance) → CSS 스니펫(CSS snippets)
```
body {
font-family: Adobe Clean UX, MARU Buri Beta, monospace;;
}
.theme-dark, .theme-light {
--default-font: Actor, MARU Buri Beta, monospace;
--font-family-editor: Actor, MARU Buri Beta, monospace;
}
strong{
font-weight: 900 !important;
}
/* image center align */
img[alt*="center"] {
display: block;
margin-left: auto;
margin-right: auto;
}
/* image right align */
img[alt*="right"] {
float:right;
clear:right;
display: block;
margin-left: auto;
margin-right: auto;
}
```
<br>
#### 2. 옵시디언 노트에서 이미지 정렬하기
아래와 같이 방법을 사용해서 가운데나 오른쪽에 정렬한다. 예제에서 400을 추가한 이유는 정렬이 잘 되는지 확인하기 위해 이미지 크기를 줄인 것이다. 크기 조절없이 정렬만 하면, ‘|400’ 부분을 빼준다.
<br>
- 방법 1. 아래 코드로 center나 right을 사용하여 정렬
```
```
<br>
- 방법 2. 아래 코드로 center나 right을 사용하여 정렬
```
```
<br>
- 방법 3. 아래 코드로 center나 right을 사용하여 정렬
```
<img alt=”center” src=”Obsidian_Logo.jpg”>
```
<br>
# References
[Centering Images in Reading Mode : r/ObsidianMD (reddit.com)](https://www.reddit.com/r/ObsidianMD/comments/v1fs0f/centering_images_in_reading_mode/)
<br>
# Links
[[_MOC_1_Obsidian]]
<br>
# Tags
#obsidian #image
<br>