Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.6k views
in Technique[技术] by (71.8m points)

css - How to write a caption under an image?

I have two images that need to kept inline; I want to write a caption under each image.

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

How can I implement?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Figure and Figcaption tags:

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

Gotta love HTML5.


See sample

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...