마크 다운 및 이미지 정렬

매월 이슈에 기사를 게시하는 사이트를 만들고 있습니다. 간단하고 Markdown 편집기 ( 스택 오버플로 의 WMD 편집기)를 사용하는 것이 완벽하다고 생각합니다.

그러나 특정 단락에서 이미지를 올바르게 정렬 할 수있는 기능이 필요합니다 .

현재 시스템으로 그렇게하는 방법을 볼 수 없습니다. 가능합니까?

Markdown에 HTML을 포함시킬 수 있으므로 다음과 같이 할 수 있습니다.

<img style="float: right;" src="whatever.jpg">

Continue markdown text...

작은 CSS 3 해킹 으로 순수한 Markdown 에서 멋진 솔루션을 찾았습니다. :-)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

왼쪽이나 오른쪽에있는 CSS 3 코드 플로트 이미지를 따라 image alt와 끝 <이나 >.

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}

많은 Markdown "추가"프로세서가 속성을 지원합니다. 따라서 다음과 같은 클래스 이름을 포함 할 수 있습니다 (PHP Markdown Extra).

![Flowers](/flowers.jpeg){.callout}

또는 대안 적으로 (Maruku, Kramdown , Python Markdown ) :

![Flowers](/flowers.jpeg){: .callout}

그런 다음 스타일 시트를 올바른 방법으로 사용할 수 있습니다.

.callout {
    float: right;
}

이 구문을 지원하는 경우 내장 된 마크 업이없고 컨텐츠 편집기로 수정할 필요가없는 스타일 시트 초록이 두 가지 장점을 모두 제공합니다.

alt 태그에서 ALT 태그와 CSS 선택기를 사용하는 위의 방법에 대한 대안이 있습니다 ... 대신 다음과 같이 URL 해시를 추가하십시오.

먼저 마크 다운 이미지 코드 :

![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)

추가 된 URL 해시 #center에 유의하십시오.

이제 CSS 3 속성 선택기를 사용하여 CSS에이 규칙을 추가하여 특정 경로가있는 이미지를 선택하십시오.

img[src*='#left'] {
    float: left;
}
img[src*='#right'] {
    float: right;
}
img[src*='#center'] {
    display: block;
    margin: auto;
}

거의 클래스 이름을 정의하는 것과 같이 이와 같은 URL 해시를 사용할 수 있어야하며 일부 사람들이 해당 솔루션에 대해 언급 한 것처럼 ALT 태그를 오용하지 않습니다. 또한 추가 확장이 필요하지 않습니다. 플로트 오른쪽과 왼쪽뿐만 아니라 원하는 다른 스타일 중 하나를 수행하십시오.

CSS를 포함시키는 것은 나쁘다 :

![Flowers](/flowers.jpeg)

다른 파일의 CSS :

img[alt=Flowers] { float: right; }

테이블을 사용하여 이미지를 세로 파이프 ( |) 구문에 맞추면 매우 게으르고 싶습니다 . 이것은 일부 Markdown 맛에 의해 지원됩니다 (그리고 보트에 떠 다니면 Textile에 의해 지원됩니다 ).

| I am text to the left  | ![Flowers](/flowers.jpeg) |

또는

| ![Flowers](/flowers.jpeg) | I am text to the right |

가장 유연한 솔루션은 아니지만 대부분의 간단한 요구에 적합하고 마크 다운 형식으로 읽기 쉽고 CSS 또는 원시 HTML을 기억할 필요가 없습니다.

더 깔끔한 것은 p#given img { float: right }스타일 시트 나 태그에 <head>싸서하는 것입니다 style. 그런 다음 markdown을 사용하십시오 ![Alt text](/path/to/img.jpg).

<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

markdown마크 다운 내부 의 속성 가능성.

learnvst의 답변이 마음에 들었 습니다.테이블을 읽을 수있는 이 (Markdown을 작성하는 목적 중 하나임).

그러나 GitBook의 Markdown 파서의 경우 빈 헤더 행 외에도 그 아래에 구분 기호 행을 추가하여 테이블을 인식하고 올바르게 렌더링해야했습니다.

| - | - |
|---|---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

구분선은 적어도 3 개의 대시를 포함해야합니다 ---.

파이썬으로 구현하면 HTML 키 / 값 쌍과 클래스 / ID 레이블을 추가 할 수 있는 확장 이 있습니다. 구문은 다음과 같습니다.

![A picture of a cat](cat.png){: style="float:right"}

또는 내장 스타일이 보트를 떠 다니지 않으면

![A picture of a cat](cat.png){: .floatright}

해당 스타일 시트와 함께 stylish.css:

.floatright {
    float: right;
    /* etc. */
}

그렉 이 마크 다운에 HTML 컨텐츠를 포함시킬 수 있다고 말 했지만 마크 다운의 요점 중 하나는 CSS / HTML 마크 업 지식에 대한 광범위한 지식이 필요하지 않다는 것입니다. 이것이 제가하는 것입니다:

Markdown 파일에서 모든 위키 편집자에게 모든 이미지를 다음과 같은 내용으로 감싸도록 지시합니다.

'<div> // Put image here  </div>`

(물론. 그들은 무슨 <div>뜻 인지 알지 못하지만 그건 중요하지 않습니다)

따라서 Markdown 파일은 다음과 같습니다.

<div>
![optional image description][1]
</div>

[1]: /image/path

그리고 전체 페이지를 감싸는 CSS 내용에서 이미지 태그로 원하는 것을 할 수 있습니다.

img {
   float: right;
}

물론 당신은 (포장이 특별한 경우에 ... CSS의 함량이 더 많은 일을 할 수있는 img점 ...이 있지만, 단지 예입니다 DIV 방지 이미지에 대한 포장에서 다른 텍스트 태그)하지만, 이럴 마크 다운을 기술적으로 숙련되지 않은 사람들이 CSS / HTML에 들어가는 것을 원하지 않는다는 것입니다. 웹 페이지는 가능한 한 일반적이고 깔끔한 페이지를 감싸는 CSS 콘텐츠를 만드는 것은 웹 개발자에게 달려 있습니다. 다시 편집자들은 그것에 대해 알 필요가 없습니다.

나는 같은 작업을했고 이것을 추가하여 이미지를 오른쪽으로 정렬했습니다.

<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>

이미지를 왼쪽이나 가운데에 맞추려면

<div style="text-align: right">

와

<div style="text-align: center">
<div style="text-align: left">

나를위한이 일

<p align="center">
 <img src="/LogoOfficial.png" width="300" >
</p>

가장 간단한 방법은 이미지를 중앙 태그로 감싸는 것입니다.

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

Markdown과 관련된 모든 것은 여기에서 테스트 할 수 있습니다- http://daringfireball.net/projects/markdown/dingus

물론, <center>더 이상 사용되지 않을 수 있지만 간단하고 작동합니다!