How to align text with the image when the image has a vertical format

Asked

Viewed 285 times

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.

2 answers

2


Would that be?

.logos .box-images img{
  margin: 0 auto;
}
  • Thank you. see how it turned out: https://jsfiddle.net/ivanferrer/vrx2c7gu/4/

  • blz, we’re there for this! D

0

.logos .box-images img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

I added this to the CSS ...

inserir a descrição da imagem aqui

Browser other questions tagged

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