Create Divs with text and images

Asked

Viewed 3,664 times

1

I have very basic knowledge in html and css, so I want your help to build 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 according to the image below. The text C, D and F, has to be below the image, but centered as shown.

inserir a descrição da imagem aqui

I count on your help ! Thank you.

In the code below I started the implementation, but I do not know how to leave the same as shown above for 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>
html css image div
  • 1

    Welcome to sopt. What have you tried?

  • I understand, but it would be interesting to try, on the site, we are always willing to help those who need, but ask for things ready is kind of taking advantage of the good will of those who want to help you. : / Start by clicking on the html and css tags to see other contents to get a sense of what you’re doing, then when you have a base, edit the question and add it, so it’s easier to help :)

  • Diego Thanks, I improved the question, I’ve actually researched the net and etc what happens here is q tah missing practice

1 answer

2

The command to center vertically on is .

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

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

  • Eduardo Mendes, Thank you very much! Exactly what I needed ;), Good Night.

  • Wonderful. Good that it served you. Then marks the answer as useful for you.

Browser other questions tagged html css image div

You are not signed in. Login or sign up in order to post.