0

I am a novice html/CSS programmer who needs to satisfy a very specific set of circumstances. I have 2 images, both must be aligned vertically by the center of the image. One image must be left aligned and the other must be right aligned. They will be in a max width div but I don't think that should be an issue. As the webpage is shrunk down below the width of the two pictures together, the images then need to be horizontally centered with one image on top of the other. I have added pictures to clarfiy (sorry I would have added as pictures but I have zero rep). The div container and images will all be variable so positioning based upon pixels is out of the question.

So I researched this a ton, but all answers I've found have been partial; not able to do everything I'm looking for. Any ideas?

(http://imageshack.us/a/img819/9515/3zt.gif)

(http://imageshack.us/a/img14/853/qp8.gif)

Research:
I notice my question was -1'd. I guess not providing my research was the fault? Here's some of the methods I tried to fix this issue: Vertical alignment of elements in a div

How to vertically align an image inside div

How to vertically middle-align floating elements of unknown heights?

Wrap long HTML tables to next line

Community
  • 1
  • 1
user2748350
  • 15
  • 1
  • 4

2 Answers2

0

Edit #2

Another version, I think this is the cleanest I can think of
live view
edit view
Use a css table and vertical-align:middle for the wide screen view, then collapse the table for narrow viewports. The code is clean and it's completely independant of image heights.

================

Edit

As @user2748350 correctly pointed out, my original suggestion below didn't align images vertically on a wide screen if they were different heights.

Here's a variation which is an improvement using vertical-align: middle and inline images. The only requirement is that you set a line height larger than the tallest image:
live view
edit view

===============================================
Original

See if this helps you:
live view
edit view

HTML

<div class="container">
<img src="http://placehold.it/300x150" class="left">
<img src="http://placehold.it/250x150" class="right">
</div>

CSS 

.container{
margin: 0 auto;
max-width:1000px;
}
img.left{
display:block;
float:left;
}
img.right{
display:block;
float:right;
}

@media (max-width: 570px) {
img.left{
float:none;
margin: 0 auto;
}
img.right{
display:block;
float:none;
margin: 0 auto;
}
}

In the head of your page, you also want to add 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

for good display on mobile devices.

Hope this helps!

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • This is beautiful thank you. I'll update the OP with my research because I notice my question was -1'd. That's the only reason I can think of. – user2748350 Sep 05 '13 at 15:18
  • Thanks @user2748350, I'm pleased this go you unstuck! – David Taiaroa Sep 05 '13 at 16:28
  • Upon implementing the solution, unfortunately I see the images are not vertically aligned (when they differ in height, if you edit your fiddle, change the second box to height 75 and you'll see what I mean). Any ideas? Otherwise this is perfect thank you. – user2748350 Sep 05 '13 at 16:45
  • You are correct @user2748350, I had missed that detail in your question. I'll think about it ;) – David Taiaroa Sep 05 '13 at 19:24
  • @user2748350, is the height of the images known? – David Taiaroa Sep 06 '13 at 00:56
  • No sorry, image heights must be variable. The numbers I put in the picture were to help illustrate the point. I think I've resolved to just use tables and deal with slightly subpar formatting. But if you think of anything brilliant be sure to let me know! – user2748350 Sep 06 '13 at 19:20
0

Here is quick solution

 img {
        max-height: 100%;
        max-width: 90%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
Knectt
  • 391
  • 3
  • 5