Reveal.js에서 단락을 왼쪽 정렬하려면 어떻게 해야 합니까?

StackOverflow https://stackoverflow.com//questions/21019476

  •  21-12-2019
  •  | 
  •  

문제

표준 HTML 단락은reveal.js의 중앙에 표시됩니다.일반 웹페이지처럼 이것을 왼쪽 맞춤으로 변경하고 싶습니다.이 작업을 수행하는 discover.js 프레젠테이션을 본 적이 있지만 어떻게 작동합니까?

도움이 되었습니까?

해결책

해결책

프레젠테이션에 일부 사용자 정의 CSS를 추가하여 슬라이드가 표시되는 방식을 변경할 수 있습니다.예를 들어, 추가

<style type="text/css">
p { text-align: left; }
</style>

모든 단락을 왼쪽 정렬합니다.

더 많은 예

왼쪽 정렬된 단락에 대해서만 질문하셨지만 누군가 유용하다고 생각하는 경우를 대비해 좀 더 복잡한 예가 있습니다.

  • 제목이 없는 슬라이드의 제목 부분 스타일을 변경합니다.

    <style type="text/css">
.reveal .slide h1 { font-size: 200%; text-decoration: underline; }
</style>

  • 제목 슬라이드의 제목 부분 스타일을 변경합니다.

    <style type="text/css">
.reveal .slides .title {
  /* Ugly ... */
  text-shadow: 0px 0px 25px rgb(100,256,0); 
  font-size: 300%;
}
</style>

Reveal.js 기본 CSS 파일은 복잡합니다. 공개.css, 그러나 CSS가 무엇을 목표로 삼아야 하는지 파악하기 위해 생성된 HTML을 보는 것만으로도 행운이 있었습니다.

판독

Reveal.js 슬라이드를 생성하는 경우에도 이 모든 기능이 작동합니다. 가격 인하 사용하여 판독, 제가 ​​강력히 추천하는 내용입니다.그런 경우에는 <style> 파일을 차단하고 Pandoc에게 파일을 삽입하라고 지시하세요. pandoc --include-in-header=<file with <style> block> ....

다른 팁

CSS 옵션을 변경하면 테마의 CSS 파일에서 바로 할 수도 있고 이러한 항목의 대부분이 어쨌든 정의됩니다.

예를 들어 테마 폴더의 "sky.css"파일에서 찾을 수 있습니다.

.reveal p {
  margin: 20px 0;
  line-height: 1.3; }
.

CSS 스 니펫 "TEXT-ALIGHT : LEFT;"이를 위해 귀하의 단락은 원하는대로 정렬됩니다 : 

.reveal p {
  margin: 20px 0;
  line-height: 1.3;
  text-align: left; }
.

CSS의 이름을 "mysky.css"와 같은 것으로 바꾸고 슬라이드 헤더의 새 테마에 링크하는 것이 좋습니다.그렇게하면 문제가 발생하면 항상 원래 테마로 다시 전환 할 수 있습니다. 내 경험에서 이것은 매우 잘 작동합니다.

Use this code in section:

<section style="text-align: left;">

I'm using external markdown and as per the accepted answer I added

<style type="text/css">
    p { text-align: left; }
</style>

at the bottom of the <head> (after all other CSS <link>s).

This works great but now all my <p> text is left-aligned. So I re-appropriated the <h6> tag (which doesn't get used much) for any 'non-bold' text that I still want to be center-aligned.

<style type="text/css">
    p { text-align: left; }
    .reveal h6 {
        text-transform: none;
        font-weight: 400;
    }
</style>

I just use it in markdown with a 6-hash prefix:

######Some non-capitalized, normal weight, centered text

Finally my images were all in <p> tags and so they were also left-aligned, but I wanted them to remain centered and only have block text left-aligned. I hacked this by prefixing the image markdown with any <h> tag on the same line, e.g. using an <h1> single hash prefix:

#![alt text][path/to/my/image.png]
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top