Add text below images using table

Navigation
1

I'm using a table to align images and text. However, when the resolution is low, it gets very unpleasant and I wanted to put the text down, at low resolutions. How do you do that being within a table?

Code: 

<table>
    <tr>
    </tr>
    <tr style="display: inline;">
        <td><img src="img/image1.jpg" id ="imagem1" class="img-thumbnail small" alt="Cinque Terre" style="max-width: none;  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float: left;width:150px"></td>
        <td><img src="img/image1.jpg" id ="imagem1" class="img-thumbnail small" alt="Cinque Terre" style="max-width: none;  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float: left;display: block;" width="150px"></td>
        <td><h3 style="padding-left: 2%">Stone Of The Month</h3></td>
        <tr style="display: inline;">
            <td><img src="img/image1.jpg" id ="imagem1" class="img-thumbnail small" alt="Cinque Terre" style="max-width: none;box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float: left;display: block;" width="150px"></td>
            <td><img src="img/image1.jpg" id ="imagem1" class="img-thumbnail small" alt="Cinque Terre" style="max-width: none; box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float: left;display: block;" width="150px"></td>
            <td><h5 style="padding-left: 2%">Lorem ipsum dolor sit amet, sint mutat maiorum usu an, vim te alia movet labores, in oratio civibus nam. Audire adipisci eos at, ad dicant deserunt deterruisset vim. An nec melius verterem, vel ex electram honestatis. Eam erant primis id, usu ex fugit elitr.</h5></td>
        </tr>
    </tr>
</table>

Image: link

How would you do it underneath, even tando in a table?

    
asked by anonymous 01.03.2016 / 17:21

1 answer

1
<div class="col-md-12">
  <div class="col-md-3">
    <img src="imagem.jpg">
    <br/>
    <span>exemplo de texto</span>
  </div>
  <div class="col-md-3">
    <img src="outraImagem.jpg">
    <br/>
    <span>exemplo de texto</span>
  </div>
</div>

link

A short example about an alignment over text below the image. It can be mounted in many ways.

If the Text gets too large, I recommend you do this. 

<div class="col-md-12">
      <div class="col-md-2 col-sm-1">
        <img src="imagem.jpg">
        <br>
        <span class="">exemplo de texto grande independente do número de caracteres, sempre permanecerá alinhado a imagem</span>
      </div>
      <div class="col-md-2 col-sm-1">
        <img src="outraImagem.jpg">
        <br>
        <span>exemplo de texto grande independente do número de caracteres, sempre permanecerá alinhado a imagem</span>
      </div>
    </div>

link

Using col-sm, it "limits" the content to the right and also moves away other content placed to the right.

    
01.03.2016 / 18:57
A potentially dangerous Request.Path value was detected from the client Get street address from latitude and longitude [closed]