如何将两张图片与标题并排放置

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>

Answer 1

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>

Answer 2

 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>

Answer 3

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

Answer 4

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>

Answer 5

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>

Answer 6

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>

Answer 7

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