wake-up-neo.net

Wie schreibe ich eine Bildunterschrift unter ein Bild?

Ich habe zwei Bilder, die inline gehalten werden müssen. Ich möchte unter jedes Bild eine Bildunterschrift schreiben.

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

Wie kann ich implementieren?

htmlcsshtml5
117
Samrat Mazumdar

Figure und Figcaption Tags:

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

Muss HTML5 lieben.

Siehe Beispiel

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

[~ # ~] 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>​

Eine Geige ist hier.

20
The Alpha
<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>
8
Greg B

Fügen Sie das Bild - sagen wir, es hat eine Breite von 140 Pixel - in einen Link ein:

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

Fügen Sie als Nächstes die Beschriftung in a ein und geben Sie ihr eine Breite, die kleiner ist als Ihr Bild, während Sie sie zentrieren:

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

Gestalten Sie den Link im Link-Tag so, dass er nicht mehr wie ein Link aussieht. Sie können ihm jede gewünschte Farbe geben, aber entfernen Sie einfach alle Textdekorationen, die Ihre Links enthalten können.

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

Ich habe das Bild mit seiner Beschriftung in einen Link eingewickelt, damit kein Text die Beschriftung aus dem Weg schieben kann: Die Beschriftung ist durch den Link mit dem Bild verbunden. Hier ist ein Beispiel: http://www.alphaeducational.com/p/okay.html

8
Susie

CSS ist dein Freund; Es besteht keine Notwendigkeit für das Center-Tag (ganz zu schweigen davon, dass es ziemlich abgeschrieben ist) oder die übermäßigen, nicht unterbrechenden Leerzeichen. Hier ist ein einfaches Beispiel:

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