How to arrange images side by side with titles below in css?

Question

How to arrange images side by side with titles below in css?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)
#4 by (0 votes)

1

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

html css3 img

asked by anonymous 04.04.2018 / 21:19

4 answers

Manage connections to the database correctly using hibernate Get user connection type in javascript

score 1 · Answer 1

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

<!DOCTYPE html>
<div class="box">
    <img src="https://pm1.narvii.com/6759/bcd6c5c19f07cd76b023bd0716f3e4f88887c0f9v2_128.jpg"/><span>Titulodaprimeiraimagem</span></div><divclass="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>

score 1 · Answer 2

If you want do not need to use float or display:inline-block . I suggest using FlexBox because it's easier for me to align the items.

Follow an example using the ::after pseudo element to place the caption, this saves a few 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>

score 0 · Answer 3

If this is 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>

score 0 · Answer 4

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>Titulodaprimeiraimagem</span></div><divclass="box">
    <img src="https://pm1.narvii.com/6759/bcd6c5c19f07cd76b023bd0716f3e4f88887c0f9v2_128.jpg"/><span>Titulodasegundaimagem</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>Titulodaprimeiraimagem</span></div><divclass="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>