【问题标题】:Xaringan: center image within one of two columns in a two columns layoutXaringan:在两列布局中的两列之一内居中图像
【发布时间】:2021-06-25 01:52:03
【问题描述】:

我正在使用双列布局,我想知道是否可以将图像居中第二列中。

这是 YAML:

---
title: "Title"
subtitle: 
author: 
date: " </br> `r Sys.Date()`"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: ["default", "custom.css", "custom-fonts.css"]
    nature:
      beforeInit: "http://www.jvcasillas.com/ru_xaringan/js/ru_xaringan.js"
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
      ratio: "16:9"
---

幻灯片:

---
# Introduction

.pull-left[
- One bullet.
-  Another bullet.
- another 
- another
- another

]
.pull-right[

<img src="img/book.jpg" alt="drawing" width="200"/>

]

这就是它的样子:

如您所见,图像“悬挂”在第二列的左上角。我想知道是否可以将其置于第二列的中心。

【问题讨论】:

  • .pull-right[ .center[ ] ] 如果你想让它水平居中。如果要垂直居中,也可以使用 .middle。
  • 非常感谢!在哪里可以了解有关此语法的更多信息?例如,如何将图片放置在离边框一定距离处,逐张滑动?
  • Alison Hill 有很多关于使用 rmarkdown 制作幻灯片的内容,alison.rbind.io。您还可以从garrickadenbuie.com 找到好的内容。
  • 我对他们的网站很熟悉,但我从未见过像.pull-right[ .center[ 这样的东西(也许我错过了。)那是css,对吧?但是,例如,如果谷歌搜索“css pull right centering”,我会发现类似:&lt;img class="center-block" src="img/book.jpg" / &gt; 这在 xaringan 中不起作用。
  • 是的,它创建了自定义 css。您还可以创建自己的自定义类并像这样应用它们。我认为 .center[] 默认带有 remark js,这是 xaringan 使用的

标签: r xaringan


【解决方案1】:

听从Tomas Capretto的建议:

---
# Introduction

.pull-left[
- One bullet.
-  Another bullet.
- another 
- another
- another

]

.pull-right[ .center[ <img src="img/book.jpg" alt="drawing" width="200"/> ] ]

结果如下:

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-09
    • 1970-01-01
    • 1970-01-01
    • 2022-10-25
    • 2016-08-26
    相关资源
    最近更新 更多