이미지 아래에 캡션을 쓰는 방법은 무엇입니까?

인라인으로 유지해야하는 두 개의 이미지가 있습니다. 각 이미지 아래에 캡션을 쓰고 싶습니다.

<center>
   <a href="http://example.com/hello">
       <img src="hello.png" width="100px" height="100px">
   </a>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
   <a href="http://example.com/hi">
       <img src="hi.png" width="100px" height="100px">
   </a>
</center>

어떻게 구현할 수 있습니까?

Figure 및 Figcaption 태그 :

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

HTML5를 좋아해야합니다.

샘플보기

#container {
    text-align: center;
}
a, figure {
    display: inline-block;
}
figcaption {
    margin: 10px 0 0 0;
    font-variant: small-caps;
    font-family: Arial;
    font-weight: bold;
    color: #bb3333;
}
figure {
    padding: 5px;
}
img:hover {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
img {
    transition: transform 0.2s;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    -o-transition: -o-transform 0.2s;
}

<div id="container">
    <a href="#">
        <figure>
            <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
            <figcaption>First image</figcaption>
        </figure>
    </a>
    <a href="#">
        <figure>
             <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
            <figcaption>Second image</figcaption>
        </figure>
    </a>
</div>

CSS

#images{
    text-align:center;
    margin:50px auto; 
}
#images a{
    margin:0px 20px;
    display:inline-block;
    text-decoration:none;
    color:black;
 }

HTML

<div id="images">
    <a href="http://xyz.com/hello">
        <img src="hello.png" width="100px" height="100px">
        <div class="caption">Caption 1</div>
    </a>
    <a href="http://xyz.com/hi">
        <img src="hi.png" width="100px" height="100px"> 
        <div class="caption">Caption 2</div>
    </a>
</div>​

바이올린이 여기 있습니다.

<div style="margin: 0 auto; text-align: center; overflow: hidden;">
  <div style="float: left;">
    <a href="http://xyz.com/hello"><img src="hello.png" width="100px" height="100px"></a>
    caption 1
  </div>
 <div style="float: left;">
   <a href="http://xyz.com/hi"><img src="hi.png" width="100px" height="100px"></a>
   caption 2                      
 </div>
</div>

링크 안에 이미지를 넣습니다. 너비가 140px라고 가정 해 보겠습니다.

<a><img src='image link' style='width: 140px'></a>

다음으로, 캡션을 a에 넣고 중앙에 배치하면서 이미지보다 너비를 줄입니다.

<a>
  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

그런 다음 링크 태그에서 더 이상 링크처럼 보이지 않도록 링크 스타일을 지정합니다. 원하는 색상을 지정할 수 있지만 링크에 표시 될 수있는 텍스트 장식 만 제거하면됩니다.

<a style='text-decoration: none; color: orange;'>
  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

어떤 텍스트도 캡션을 밀어 낼 수 없도록 이미지를 링크에 캡션으로 감쌌습니다. 캡션은 링크로 그림과 연결되어 있습니다. 예 : http://www.alphaeducational.com/p/okay.html

CSS는 당신의 친구입니다. 센터 태그 (상당히 감가 상각 된 것은 말할 것도없고)도 필요하지 않으며 과도한 비 깨지지 않는 공간도 없습니다. 다음은 간단한 예입니다.

CSS

.images {
    text-align:center;
}
.images img {
    width:100px;
    height:100px;
}
.images div {
    width:100px;
    text-align:center;
}
.images div span {
    display:block;
}
.margin_right {
    margin-right:50px;
}
.float {
    float:left;
}
.clear {
    clear:both;
    height:0;
    width:0;
}

HTML

<div class="images">
    <div class="float margin_right">
        <a href="http://xyz.com/hello"><img src="hello.png" width="100px" height="100px" /></a>
        <span>This is some text</span>
    </div>
    <div class="float">
        <a href="http://xyz.com/hi"><img src="hi.png" width="100px" height="100px" /></a>
        <span>And some more text</span>
    </div>
    <span class="clear"></span>
</div>

반응 형 이미지 용. 그림 태그 내에 그림 및 소스 태그를 추가 할 수 있습니다.

<figure>
  <picture>
    <source media="(min-width: 750px)" srcset="images/image_2x.jpg"/>
    <source media="(min-width: 500px)" srcset="images/image.jpg" />
    <img src="images.jpg" alt="An image">
  </picture>
  <figcaption>Caption goes here</figcaption>
</figure>

더 의미 적으로 정확하고 OPs를 나란히 정렬하는 것에 대한 원래 질문에 대답하려면 다음을 사용합니다.

HTML

<div class="items">
<figure>
    <img src="hello.png" width="100px" height="100px">
    <figcaption>Caption 1</figcaption>
</figure>
<figure>
    <img src="hi.png" width="100px" height="100px"> 
    <figcaption>Caption 2</figcaption>
</figure></div>

CSS

.items{
text-align:center;
margin:50px auto;}


.items figure{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;}

https://jsfiddle.net/c7borg/jLzc6h72/3/

<figcaption>HTML5 의 태그를 사용하면 이미지에 텍스트를 입력 할 수 있습니다. 예를 들면 다음과 같습니다.

<figcaption>
Your text here
</figcaption>.

그런 다음 CSS를 사용하여 이미지에서 텍스트가 있어야하는 위치에 텍스트를 배치 할 수 있습니다.

<table>
<tr><td><img ...><td><img ...>
<tr><td>caption1<td>caption2
</table>

원하는 스타일.