마크 다운 및 이미지 정렬 것이 완벽하다고 생각합니다. 그러나 특정 단락에서 이미지를

매월 이슈에 기사를 게시하는 사이트를 만들고 있습니다. 간단하고 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).