Create divs with text and images

Question

Create divs with text and images

Navigation

#1 by (2 votes)

1

I have very basic knowledge in html and css, so I want to help you guys to build some points of the layout below using HTML and CSS. img deals with an image size of 100px per 100px. Note: The text A, B and F must have a space between the images and be centered according to the image below. The text C, D and F must be underneath the image, but centered as shown.

Icountonyourhelp!Thankyou.

InthecodebelowIstartedtheimplementation,butIdonotknowhowtoleavethesameasshownaboveregardingspaceandskiplineforeachimageofTextAandTextB.

<divid="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>

html css div imagem

asked by anonymous 23.02.2016 / 23:56

1 answer

Connectionstring according to scenario Error: No supported encrypter found. The cipher and / or key length are invalid

score 2 · Answer 1

The command to vertically center css is 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>