[github] github README.md 센터 이미지

Program / 글쓴이

나는 GitHub에서 잠시 동안 사용 된 마크 다운 구문을 살펴 보았지만 readme.md 페이지의 범위까지 이미지 크기를 조정하는 것을 제외하고는 이미지를 가운데에 배치하는 방법을 알 수 없습니다.

가능합니까? 그렇다면 어떻게?

답변

github […]에 사용 된 markdown 구문을 살펴 봤는데 이미지를 가운데에 배치하는 방법을 알 수 없습니다

TL; DR

Markdown 구문 에만 의존 해서는 안됩니다 . 마크 다운은 위치를 신경 쓰지 않습니다.

참고 : 일부 마크 다운 프로세서는 HTML (@ waldyr.ar에서 올바르게 지적한대로) 포함을 지원하며 GitHub의 경우 다음과 같이 대체 될 수 있습니다 <div style="text-align:center"><img src="..." /></div>. 리포지토리가 다른 호스팅 환경 (Codeplex, BitBucket 등)에서 분기 된 경우 또는 브라우저를 통해 문서를 읽지 않은 경우 (Sublime Text Markdown Preview, MarkdownPad, VisualStudio Web) 이미지가 중앙에 위치한다는 보장은 없습니다. 필수 마크 다운 미리보기, …).

참고 2 : GitHub 웹 사이트에서도 마크 다운이 렌더링되는 방식이 일정하지 않다는 점에 유의하십시오. 예를 들어, 위키는 그러한 CSS 위치 트릭을 허용하지 않습니다.

요약되지 않은 버전

마크 다운 구문은 이미지의 위치를 제어하는 능력을 제공하지 않는다.

실제로 “철학” 섹션에 명시된 바와 같이 이러한 형식을 허용하는 것은 마크 다운 철학과의 경계입니다.

“마크 다운 형식의 문서는 태그 나 서식 지침으로 표시되지 않은 것처럼 일반 텍스트로 그대로 게시 할 수 있어야합니다.”

마크 다운 파일은 Ruby Redcarpet 라이브러리를 사용하여 github.com 웹 사이트에서 렌더링됩니다 .

Redcarpet 은 표준 Markdown 구문의 일부가 아닌 추가 기능을 제공하는 일부 확장 (예 : 취소 선)을 노출합니다 . 그러나 지원되는 확장 프로그램을 사용하면 이미지를 가운데에 맞출 수 없습니다.

답변

이것은 Github의 지원에서 온 것입니다.

월 디르,

Markdown을 사용하면 정렬을 직접 조정할 수 없습니다 (문서 참조 : http://daringfireball.net/projects/markdown/syntax#img ) 원시 HTML ‘img’태그를 사용하고 인라인으로 정렬 할 수 있습니다 CSS.

건배,

따라서 이미지를 정렬 할 수 있습니다! 문제를 해결하려면 인라인 CSS를 사용해야합니다. 내 github repo 에서 예제를 볼 수 있습니다 . README.md의 맨 아래에는 중앙에 정렬 된 이미지가 있습니다. 단순화를 위해 다음과 같이 할 수 있습니다.

<p align="center">
  <img src="http://some_place.com/image.png" />
</p>

nulltoken이 말했듯이 Markdown 철학과의 경계가 될 것입니다!

내 readme 의이 코드 :

<p align="center">
  <img src="https://github.com/waldyr/Sublime-Installer/blob/master/sublime_text.png?raw=true" alt="Sublime's custom image"/>
</p>

GitHub에서 볼 때 중심을 제외하고이 이미지 출력을 생성합니다.

숭고한 커스텀 이미지

답변

또는 CSS를 제어하는 ​​경우 url 매개 변수 및 css를 사용 하여 영리 할 수 있습니다.

가격 인하:

![A cute kitten](http://placekitten.com/200/300?style=centerme)

그리고 CSS :

img[src$="centerme"] {
  display:block;
  margin: 0 auto;
}

이런 방식으로 다양한 스타일링 옵션을 생성하고 마크 다운을 추가 코드없이 깨끗하게 유지할 수 있습니다. 물론 다른 사람이 다른 곳에서 마크 다운을 사용하는 경우 어떻게되는지 제어 할 수는 없지만 한 사람이 공유하는 모든 마크 다운 문서의 일반적인 스타일 문제입니다.

답변

들어 왼쪽 정렬 

 <img align="left" width="600" height="200" src="https://www.python.org/python-.png">

에 대한 올바른 정렬 

<img align="right" width="600" height="200" src="https://www.python.org/python-.png">

그리고 중심 정렬 

<p align="center">
  <img width="600" height="200" src="https://www.python.org/python-.png">
</p>

유용한 경우 나중에 참조 할 수 있도록 여기 에 포크 하십시오 .

답변

그것은 github에서 나를 위해 일합니다.

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

답변

원하는 너비 와 높이로 이미지 크기를 조정할 수도 있습니다 . 예를 들면 다음과 같습니다.

<p align="center">
  <img src="https://anyserver.com/image.png" width="750px" height="300px"/></p>

이미지에 중심 캡션 을 추가하려면 한 줄만 추가하십시오.

<p align="center">This is a centered caption for the image<p align="center">

다행히도 이것은 README.md 및 GitHub Wiki 페이지 모두에서 작동합니다.

답변

우리는 이것을 사용할 수 있습니다. git 폴더에서 ur img의 src 위치를 변경하고 img 가로 드되지 않은 경우 대체 텍스트를 추가하십시오

 <p align="center">
    <img src="ur img url here" alt="alternate text">
 </p>