인라인으로 유지해야하는 두 개의 이미지가 있습니다. 각 이미지 아래에 캡션을 쓰고 싶습니다.
<center>
<a href="http://example.com/hello">
<img src="hello.png" width="100px" height="100px">
</a>
<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;}