2
I have the following CSS:
.logos {
max-width:1024px;
vertical-align:middle;
align-items: center;
justify-content: center;
margin:auto;
}
.logos img {
max-width: 100%;
max-height: 100%;
}
.logos .box-images div {
display: flex;
align-items: center;
justify-content: center;
text-align:center;
width:160px;
position:absolute;
}
.logos .box-images {
vertical-align:middle;
height: 190px;
width: 160px;
background-color: #fff;
margin-bottom:15px;
float:left;
margin:20px;
/* Centralizando imagens */
display: flex;
align-items: center;
justify-content: center;
}
.logos .break {
display:block;
border-bottom:1px solid #679300;
clear:both;
width:auto;
}
And the HTML below:
<div class="logos">
<div class="box-images">
<div>Empresa 1</div>
<img src="http://i.stack.imgur.com/CMoaX.jpg">
</div>
<div class="box-images">
<div>Empresa 2</div>
<img src="http://i.stack.imgur.com/CMoaX.jpg">
</div>
<div class="box-images">
<div>Empresa 3</div>
<img src="http://i.stack.imgur.com/lIkte.jpg">
</div>
<div class="box-images">
<div>Empresa 4</div>
<img src="http://i.stack.imgur.com/lIkte.jpg">
</div>
<div class="box-images">
<div>Empresa 5</div>
<img src="http://i.stack.imgur.com/CMoaX.jpg">
</div>
<div class="break">
</div>
<div class="box-images">
<div>Empresa 6</div>
<img src="http://i.stack.imgur.com/lIkte.jpg">
</div>
<div class="box-images">
<div>Empresa 7</div>
<img src="http://i.stack.imgur.com/CMoaX.jpg">
</div>
<div class="box-images">
<div>Empresa 8</div>
<img src="http://i.stack.imgur.com/CMoaX.jpg">
</div>
<div class="box-images">
<div>Empresa 9</div>
<img src="http://i.stack.imgur.com/lIkte.jpg">
</div>
<div class="box-images">
<div>Empresa 10</div>
<img src="http://i.stack.imgur.com/CMoaX.jpg">
</div>
<div class="break">
</div>
<div class="box-images">
<div>Empresa 11</div>
<img src="http://i.stack.imgur.com/CMoaX.jpg">
</div>
<div class="box-images">
<div>Empresa 12</div>
<img src="http://i.stack.imgur.com/lIkte.jpg">
</div>
<div class="box-images">
<div>Empresa 13</div>
<img src="http://i.stack.imgur.com/lIkte.jpg">
</div>
<div class="box-images">
<div>Empresa 14</div>
<img src="http://i.stack.imgur.com/CMoaX.jpg">
</div>
<div class="box-images">
<div>Empresa 15</div>
<img src="http://i.stack.imgur.com/CMoaX.jpg">
</div>
<div class="break">
</div>
<div class="box-images">
<div>Empresa 16</div>
<img src="http://i.stack.imgur.com/lIkte.jpg">
</div>
<div class="box-images">
<div>Empresa 17</div>
<img src="http://i.stack.imgur.com/CMoaX.jpg">
</div>
<div class="box-images">
<div>Empresa 18</div>
<img src="http://i.stack.imgur.com/lIkte.jpg">
</div>
<div class="box-images">
<div>Empresa 19</div>
<img src="http://i.stack.imgur.com/lIkte.jpg">
</div>
<div class="box-images">
<div>Empresa 20</div>
<img src="http://i.stack.imgur.com/CMoaX.jpg">
</div>
</div>
I would like to align the text on top when the image is standing.
See here the Jsfiddle.
Thank you. see how it turned out: https://jsfiddle.net/ivanferrer/vrx2c7gu/4/
– Ivan Ferrer
blz, we’re there for this! D
– RaphaelGodoi