Create divs with texts and images

Question

Create divs with texts and images

I have very basic knowledge in html and css, so I want your help for building some points of the layout below using HTML and CSS. The img deals with an image size 100px by 100px.
Note: Text A,B, and F must have a space between the images and be centered as shown below. Text C, D, and F must be below the image, but centered as shown.

Account with your help ! Thanks.

In the code below I started the implementation, but I do not know how to leave the same as shown above in terms of space and skip line for each image of text A and text B.

<div id="tudo" >
<div  style=" height:72px;  float:left; background-color:yellow" > 
 <img src="images.png" alt=""   style="width:100px; height:100px;  "/>
       <p style="float:right;  background-color:white"> Ler</p>
  </div>
  <div  style=" height:72px;  float:left; background-color:yellow" > 
 <img src="images.png" alt=""   style="width:100px; height:100px;  "/>
        <p style="float:right;  background-color:white"> Ler</p>
 </div>
</div>

1

html css div imagem

Author: Camila, 2016-02-23

Source

1 answers

score 2 · Answer 1

The command to center vertically in cssis line-height.

Take a look at the code below and see if it suits you.

.linha {
  display: table;
  margin: 5px;
  }

.img  {
    width: 100px;
    height: 100px;
    border: solid 3px #000;
  float: left;
}

.texto_img {
  width: 100px;
  height: 100px;
  line-height:100px; 
  float: left;
}  

.celula {
  float: left;
  margin: 2px;
  }

.legenda {
    text-align: center;
  width: 100px;
  }

<div class="linha">
  <div class="img">img 01</div>
  <div class="texto_img">Texto A</div>
</div>

<div class="linha">
  <div class="img">Img 02</div>
  <div class="texto_img">Texto B</div>
</div>

<div class="linha">
    <div class="celula">
      <div class="img">Img 03</div>
      <div class="legenda">Texto C</div>
    </div>
  
  <div class="celula">
      <div class="img">Img 04</div>
      <div class="legenda">Texto D</div>
    </div>
  
  <div class="celula">
      <div class="img">Img 05</div>
      <div class="legenda">Texto </div>
    </div>
</div>

<div class="linha">
  <div class="img">Img 06</div>
  <div class="texto_img">Texto F</div>
</div>