CODEWITHSUNDEEP
htmlcss
salvabalza
salvabalza

Reputation: 173

Vertical align two images and some multiline text

I'm trying to create in HTML a layout like in the image below:

I've a fixed image, (I know its size), then I need to place some multiline text, then another image, of variable size.

All the three elements should be aligned vertically i.e. the vertical centre of all them should be the same.

If it matters, this page should be shown on mobile devices.

I've checked all the related questions on stackoverflow, and tried all the possibilities I see, but with no luck.enter image description here

Upvotes: 1

Views: 490

Answers (4)

Mario Sanchez Maselli
Mario Sanchez Maselli

Reputation: 1101

You can use display table and play with it... not sure if you want the same layout on mobile, but you can do something like this:

<div class="content-wrapper">
   <div class="col four"> 
     <img src="http://lorempixel.com/100/100/" alt="">    
   </div>
   <div class="col four">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   </div>
   <div class="col four">
      <img src="http://lorempixel.com/200/200/" alt="">
   </div>
</div>

and the following css:

*{ box-sizing: border-box; }

.content-wrapper{
   display-table;
   max-width:800px;
}

.col{
   display:table-cell;
   vertical-align:middle;
   padding:10px;
}

.four{
 width: 33.33%
}

If you want a different layout on mobile you should problably change the display table to display relative and the with of each one of the col to 100%.

Check this example: https://jsfiddle.net/m8zqm4co/10/

Upvotes: 1

alexandreferris
alexandreferris

Reputation: 684

Lets suppose you have a div where both images and the text goes inside it.

Try this out:

#container {
    	height: 300px;
    	line-height: 300px; /* same size as height */
    	display: inline-block;
    }
    .inner img{	
    	display: inline-block;
    	vertical-align: middle;
    }
<div id="container">
        <div class="inner">
    	    <img src="http://placehold.it/100x100">
            Example Test
            <img src="http://placehold.it/200x200">
        </div>
    </div>

Upvotes: 0

Felix A J
Felix A J

Reputation: 6480

HTML, BODY{
height: 100%;
}
.wrap{
border: 1px solid red;
position: relative;
height: 100%;

}
.wrap img:nth-of-type(1), .wrap img:nth-of-type(2), .wrap p{
top: 50%;
 transform: translateY(-50%);
position: relative;
}
.wrap img:nth-of-type(1){
position: absolute;
left: 10px;
}
.wrap img:nth-of-type(2){
display: inline-block;
vertical-align: middle;
width: 30%;
float: right;
}
.wrap p{
float: left;
width: 40%;
margin: 0 10px 0 25%;
text-align: center;
}
<div class="wrap">
<img src="http://lorempixel.com/100/100/nature/" alt="">
   <img src="http://lorempixel.com/200/200/nature/" alt=""> 
<p>0s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially un</p>
</div>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You can do something slightly complicatedly simple for this:

.three-col {text-align: center; vertical-align: middle; display: table; width: 100%;}
.three-col .running-text {vertical-align: middle; display: table-cell; text-align: center;}
.three-col .running-text p {display: inline-block;}
<div class="three-col">
  <div class="running-text">
    <img src="http://placehold.it/100x100" alt="" class="fixed-img">
  </div>
  <div class="running-text">
    <p>Poda Venna</p>
  </div>
  <div class="running-text">
    <img src="http://placehold.it/200x200" alt="" class="fixed-img">
  </div>
</div>
<div class="three-col">
  <div class="running-text">
    <img src="http://placehold.it/100x100" alt="" class="fixed-img">
  </div>
  <div class="running-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam modi cumque ratione voluptatem sunt voluptatibus veniam esse placeat amet labore cupiditate, mollitia eaque hic earum officia voluptatum et, obcaecati consequuntur.</p>
  </div>
  <div class="running-text">
    <img src="http://placehold.it/200x200" alt="" class="fixed-img">
  </div>
</div>

Upvotes: 0

Related Questions