1

I want to create a responsive hero image, but I can't seem to center my picture element in a parent div. I already checked these posts:

Center image in div horizontally
Center align image within div horizontally
Center image element in parent div

As suggested in these other posts, I tried playing with margin: auto auto;, with position, setting min-width to the parent div, but the image remains aligned to the far left. Here's an example of what I'm trying to achieve

And here's my code (I've also created a jsfiddle: https://jsfiddle.net/wuy44t9p/1/):

<style type="text/css">
    .profile-banner {
        display: block;
        height: 500px;
        position: relative;
    }

    .profile-banner picture {
        display: block;
        margin: 0 auto;
        position: absolute;
    }   

</style>


<div id="CPHBigBanner_pnlCoverPhoto">   
    <section class="profile-banner lazy">
        <picture class="profile-herobanner lazy" data-was-processed="true">
            <source type="image/webp" class="lazy" data-srcset="http://www.1001locaties.nl/images/tmp/41747_965_Owl.webp" srcset="/images/objphotos/covers/41747_965_Owl.webp" data-was-processed="true">
            <img class="lazy loaded" data-src="http://www.1001locaties.nl/images/tmp/41747_965_Owl.png" alt="" src="/images/objphotos/covers/41747_965_Owl.png" data-was-processed="true">
        </picture>    
    </section>
</div>
Adam
  • 6,041
  • 36
  • 120
  • 208
  • remove the absolute positioning and you may need to give a width to the picture - at the moment it looks as if it may be as wide as it's container – Pete May 11 '18 at 12:39
  • Nice! That did the trick, however, the image width is not always known...is there a CSS solution that does not rely on providing the width? – Adam May 11 '18 at 12:47
  • You could try max-width:100% and it should restrain it to the max width of the image or the container depending on which is smallest – Pete May 11 '18 at 12:49
  • I removed the `width` attribute from `picture` and added `max-width: 100%;` but that doesn't work – Adam May 11 '18 at 12:54

1 Answers1

2

As per my comments you need to remove the absolute positioning from the image but also add text-align center to the container:

.profile-banner {
  display: block;
  height: 500px;
  text-align:center;
}

.profile-banner picture {
  display: block;
  margin: 0 auto;
}
<div id="CPHBigBanner_pnlCoverPhoto">
  <section class="profile-banner lazy">
    <picture class="profile-herobanner lazy" data-was-processed="true">
      <source type="image/webp" class="lazy" data-srcset="http://www.1001locaties.nl/images/tmp/41747_965_Owl.webp" srcset="https://via.placeholder.com/350x150" data-was-processed="true">
      <img class="lazy loaded" data-src="http://www.1001locaties.nl/images/tmp/41747_965_Owl.png" alt="" srcset="https://via.placeholder.com/350x150" data-was-processed="true">
    </picture>
  </section>
</div>
Pete
  • 57,112
  • 28
  • 117
  • 166
  • Thanks, that aligns the image correctly. However, the image is not responsive anymore...I tried setting `width:100%` on the `image` element, but that scales the images always to the full browser window width...how can I make the image responsive? – Adam May 11 '18 at 22:19
  • Give it a percentage other than 100% – Pete May 14 '18 at 08:33
  • I've just thought if you want it to be 100% up to the width of the image - and then it stops, you could use something like `width:100%; max-width:350px;` where the 350px is the original width of the image – Pete May 14 '18 at 09:56