How do you put two images side by side with captions-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

if yes use Flex property

<div >
<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*/
}

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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

<div  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>

CodePudding user response：

What actually do you want!! do you want the images side by side