How do you put two images side by side with captions

Question

I am trying to put two images side by side in Jupyter's markdown. We can use html but I am unable to put two images side by side with caption. I tried every option in here but did not work.

<figure>
<img src='aaa.png' width="350" height="350" align="center"/>
    <figcaption align = "center"><b>Fig 2.5; Courtesy of Linear Algebra: Theory, Intuition, Code by Mike X Cohen</b></figcaption>
<img src='bbb.png' width="350" height="350" align="center"/>
    <figcaption align = "center"><b>Fig 2.3; Courtesy of Linear Algebra: Theory, Intuition, Code by Mike X Cohen</b></figcaption>
</figure>

score 0 · Answer 1 · answered Dec 23 '21 at 11:27

Check this out

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

<div class="row">
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
    <figcaption>Fig.1 - Trulli</figcaption>
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width:100%">
    <figcaption>Fig.2 - Puglia</figcaption>
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
  <figcaption>Fig.3 - Italy</figcaption>
</div>

Thanks, how I type the figure styling in markdown? I am using jupyter notebook. — ilovewt, Dec 23 '21 at 11:48
you should include a custom.css file with these styling code and link it your project..**To customize it using CSS, you need to check a file named custom. css in the directory ~/. jupyter/custom. If you have it, you can add some CSS code to it** — Monika Virmani, Dec 23 '21 at 11:56
if this Answers helped you ,so dont forget to upvote it..thanks — Monika Virmani, Dec 23 '21 at 11:58

score 0 · Answer 2 · answered Dec 23 '21 at 11:29

0

figure{text-align: center; max-width: 40%; float:left; margin:0;padding: 10px;}
figure img{width: 100%;}

<figure>
<img src='aaa.png'/>
    <figcaption align = "center"><b>Fig 2.5; Courtesy of Linear Algebra: Theory, Intuition, Code by Mike X Cohen</b></figcaption>
</figure>
<figure>
<img src='bbb.png'/>
    <figcaption align = "center"><b>Fig 2.3; Courtesy of Linear Algebra: Theory, Intuition, Code by Mike X Cohen</b></figcaption>
</figure>

answered Dec 23 '21 at 11:29

Aman Sharma

933
1
4
12

Thanks, how I type the figure styling in markdown? I am using jupyter notebook. – ilovewt Dec 23 '21 at 11:48

score 0 · Answer 3 · answered Dec 23 '21 at 11:30

if yes use Flex property

<div class="outerlayer">
<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</div

Styling

.outerlayer{
display: flex;/* arranges both images side by side*/
column-gap: 10px; /* To give a gap between both*/
}

score 0 · Answer 4 · answered Dec 23 '21 at 11:48

0

Hope, you want something like this!

figure {display: flex;}
div {border:2px solid black; width:200px; padding:5px; margin:0 10px; text-align:center;}

<figure>
  <div>
    <img src='https://picsum.photos/200/200'/>
    <figcaption>Fig 2.5; Courtesy of Linear Algebra: Theory, Intuition, Code by       Mike X Cohen</figcaption>
  </div>
  <div>
    <img src='https://picsum.photos/200/200'/>
    <figcaption> Fig 2.3; Courtesy of Linear Algebra: Theory, Intuition, Code by      Mike X Cohen </figcaption>
  </div>
</figure>

answered Dec 23 '21 at 11:48

Deadpool

7,811
9
44
88

Thanks, but the figure styling `figure {display: flex;} div {border:2px solid black; width:200px; padding:5px; margin:0 10px; text-align:center;}` does not work in jupyter's markdown. The below code works but without which still won't show side by side. – ilovewt Dec 23 '21 at 11:52

score 0 · Answer 5 · answered Dec 23 '21 at 13:45

Try this code to put image side by side with caption

<style>
figure{
    display: inline-block;
}
</style>

<figure>
    <img src='image.jpg' alt='image 1' />
    <figcaption>Caption goes here</figcaption>
</figure>
<figure>
    <img src='image.jpg' alt='image 1' />
    <figcaption>Caption goes here</figcaption>
</figure>

score 0 · Answer 6 · answered Dec 23 '21 at 13:46

Here are all basic inline styles to align your images side by side with captions. Hope this works in Jupyter Notebook.

<div class="container" style="display: inline-block;">  
  <figure>
  <div style="float: left; padding: 10px;">
    <img src='aaa.png' width="350" height="350" align="center"/>
    <figcaption align="center"><b>Fig 2.5; Courtesy of Linear Algebra: Theory,<br> Intuition, Code by Mike X Cohen</b></figcaption>
  </div>

  <div style="float: right; padding: 10px;">
    <img src='bbb.png' width="350" height="350" align="center"/>
    <figcaption align="center"><b>Fig 2.3; Courtesy of Linear Algebra: Theory,<br> Intuition, Code by Mike X Cohen</b></figcaption>
  </div>
  </figure>
</div>

How do you put two images side by side with captions

6 Answers6