Xaringan: Show two images side-to-side isn't working and text misalignment.

[paulapereda]

My code is working just fine but I want to insert two images side-to-side and it only shows me the first one.

This is my code:

<div align="left">
<img src="http://phdcomics.com/comics/archive/phd101212s.gif" width=300 height=400>
</div>

<div align="center">
<img src="http://phdcomics.com/comics/archive/phd052810s.gif" width=300 height=242>
</div>

Also the text in this slide is misaligned (centered) and the first bullet point has some extra space, that I can't get where is coming from. Here's the code:

# **Empezando**

El control de versiones es una categoría de software que realiza un seguimiento de los cambios en sus archivos por usted. Te permite:

- experimentar con código y función sin romper el proyecto principal 💜

- mantener todo el historial de un archivo e inspeccionar un archivo a lo largo de su vida útil

- etiqueta una versión en particular para que puedas volver a ellas fácilmente

- facilita las colaboraciones y hace que las contribuciones sean transparentes
---
class: inverse

Thanks in advance!

[ekstroem]

This would be a great question for stack overflow since it is not a particular issue with xaringan but more your own code. If you put questions there then the answers will be easier to find and others can more readily benefit from them.

The indentation of the first bullet point is because all your lines are centered. To find the solution to that and the side-by-side images we need to see a full minimal working example that shows the problem. Why are you including the images as html? Try the include_graphics function - it may make it easier to tweak stuff later on.

[jmburgos]

What you want to do is something like this:

.pull-left[
<img src="http://phdcomics.com/comics/archive/phd101212s.gif" width=300 height=400>
]

.pull-right[
<img src="http://phdcomics.com/comics/archive/phd052810s.gif" width=300 height=242>
]