How to dispose images next to each other with titles below in css?

Asked

Viewed 41,221 times

1

I would like to know how to dispose images side by side, with title/caption below. Using CSS and tag <img>, similar to the iTunes Store website.

html css3 img

  • PFO be more objective, edit your question as what you already have of code, some image of the layout you want, if you are using Bootstrap or some framework etc. The way you asked can not answer you precisely.

  • Have you tried at least? Has a source basis for this?

  • Then, the images are on the side, but the text is not below, and when it is below using <br> the next image goes down. Now I’ve read the responses of other users, and that’s just what I needed. Thank you all so much for your time and help me.

4 answers

1

Thank you very much. That’s what I was looking for.

<!DOCTYPE html>
<div class="box">
    <img src="https://pm1.narvii.com/6759/bcd6c5c19f07cd76b023bd0716f3e4f88887c0f9v2_128.jpg"/>
    <span> Titulo da primeira imagem </span>
</div>
<div class="box">
    <img src="https://pm1.narvii.com/6759/bcd6c5c19f07cd76b023bd0716f3e4f88887c0f9v2_128.jpg"/>
    <span> Titulo da segunda imagem </span>
</div>

<style>
div.box {
	width: 150px;
	display: inline-block;
}
</style>

<!DOCTYPE html>
<div class="box">
    <img src="https://pm1.narvii.com/6759/bcd6c5c19f07cd76b023bd0716f3e4f88887c0f9v2_128.jpg"/>
    <span> Titulo da primeira imagem </span>
</div>
<div class="box">
    <img src="https://pm1.narvii.com/6759/bcd6c5c19f07cd76b023bd0716f3e4f88887c0f9v2_128.jpg"/>
    <span> Titulo da segunda imagem </span>
</div>

<style>
div.box {
	width: 150px;
	display: inline-block;
}
</style>

0

You need to use width and display: inline-block; of the CSS.

<!DOCTYPE html>
<div class="box">
    <img src="https://pm1.narvii.com/6759/bcd6c5c19f07cd76b023bd0716f3e4f88887c0f9v2_128.jpg"/>
    <span> Titulo da primeira imagem </span>
</div>
<div class="box">
    <img src="https://pm1.narvii.com/6759/bcd6c5c19f07cd76b023bd0716f3e4f88887c0f9v2_128.jpg"/>
    <span> Titulo da segunda imagem </span>
</div>

<style>
div.box {
	width: 150px;
	display: inline-block;
}
</style>

0

If that’s what you want:

.imagem{

  float: left;
  width: 50px;
}

img{
  width: 100%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
<div class="imagem">
   <img src="suaImagem1.jpg" title="escreva aqui seu titulo da imagem"/>
</div>

  <div class="imagem">
   <img src="suaimagem2.jpg" title="escreva aqui seu titulo da imagem"/>
</div>
</body>
</html>

0

If you want don’t need use float or display:inline-block. I suggest you use FlexBox because it is easier for me to align the items.

Follow an example using the pseudo element ::after to put the caption, this saves some lines of code. (I left a comment in css)

.holder {
    display: flex;
    justify-content: center;
}
.imagem {
  width: 200px;
  margin: 10px;
  position: relative;
  text-align: center;
}
.imagem::after {
  content: attr(data-title); /* estilo que coloco a legenda no lugar */
  position: absolute;
  width: 100%;
  bottom: -20px;
  left: 0;
}
<div class="holder">

  <div class="imagem" data-title="legenda # 1">
    <img src="http://placecage.com/199/100" alt="">
  </div>

  <div class="imagem" data-title="legenda # 2">
    <img src="http://placecage.com/201/100" alt="">
  </div>

</div>

Browser other questions tagged html css3 img

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