Standard-HTML-Absätze werden mit reveal.js zentriert angezeigt. Ich möchte das auf linksbündig ändern, wie auf einer normalen Webseite. Ich habe reveverw.js Präsentationen gesehen, die das tun, aber wie funktioniert das?Wie kann ich linksbündige Absätze in reveal.js erhalten?
Sie ändern können, wie die Folien, indem Sie einige benutzerdefinierte CSS, um Ihre Präsentation erscheinen. Z. B. addiert
<style type="text/css">
p { text-align: left; }
</style>
, um alle Absätze links auszurichten.
Sie fragte nur über linksbündig Absätze, aber hier sind einige kompliziertere Beispiele, falls jemand findet sie nützlich:
Restyle der Titelrolle von nicht-Titel Folien :
<style type="text/css">
.reveal .slide h1 { font-size: 200%; text-decoration: underline; }
</style>
Restyle der Titelrolle der Titelfolie:
<style type="text/css">
.reveal .slides .title {
/* Ugly ... */
text-shadow: 0px 0px 25px rgb(100,256,0);
font-size: 300%;
}
</style>
Die CSS-Dateien von reveal.js sind kompliziert, z. reveal.css, aber ich hatte viel Glück, wenn ich mir nur den generierten HTML ansah, um herauszufinden, worauf mein CSS zielen sollte.
dies nach wie vor alle funktioniert, wenn Sie reveal.js Dias von markdown mit Pandoc zu erzeugen, die ich sehr empfehlen. Setzen Sie in diesem Fall den Block <style> in eine Datei und teilen Sie Pandoc mit, ihn mit pandoc --include-in-header=<file with <style> block> ... einzufügen.
Wenn Sie anfangen, die CSS-Optionen zu ändern, können Sie das auch direkt in der CSS-Datei des Themas tun, wo die meisten dieser Dinge sowieso definiert sind.
Zum Beispiel finden Sie dies in der Datei "sky.css" im Themes-Ordner.
.reveal p {
margin: 20px 0;
line-height: 1.3; }
Fügen Sie einfach das CSS-Snippet "text-align: left;" dazu und werden Ihre Absätze wie gewünscht ausgerichtet:
.reveal p {
margin: 20px 0;
line-height: 1.3;
text-align: left; }
Es macht wohl Sinn, dass die CSS zu so etwas wie „mysky.css“ und einem Link zu dem neuen Thema in Ihren Folien Header umbenennen. Auf diese Weise können Sie, wenn Probleme auftreten, jederzeit zum ursprünglichen Thema zurückkehren. Meiner Erfahrung nach funktioniert das sehr gut.
Verwenden Sie diesen Code in Abschnitt:
<section style="text-align: left;">
Ich bin mit externem Abschlag und gemäß der akzeptierten Antwort Ich habe
<style type="text/css">
p { text-align: left; }
</style>
am unteren Rande der <head> (nach allen anderen CSS <link> s).
Das funktioniert gut, aber jetzt ist mein <p> Text linksbündig. Also habe ich das <h6>-Tag (das nicht sehr häufig verwendet wird) für jeden nicht fett formatierten Text wieder verwendet, der immer noch zentriert werden soll.
<style type="text/css">
p { text-align: left; }
.reveal h6 {
text-transform: none;
font-weight: 400;
}
</style>
ich es nur mit einem 6-Hash-Präfix in Abschlags verwenden:
######Some non-capitalized, normal weight, centered text
schließlich alle meine Bilder wurden in <p> Tags und so wurden sie auch linksbündig, aber ich wollte, dass sie bleiben zentriert und nur Blocktext linksbündig. Ich habe das gehackt, indem ich den Bildabschlag mit irgendeinem <h> Tag in der gleichen Zeile, z.B. unter Verwendung eines <h1> einzelnen Hash-Präfixes:
#![alt text][path/to/my/image.png]