0

Currently I have something like the following: 

<div class="wrapper">
    <div id="imageWrapper">
      <img src="https://picsum.photos/200/300?image=0" alt="" width="100%"> 
    </div>
    <div class="contentWrapper">
      <div class="title">
        sample
      </div>
            <div class="summary">
        sample
      </div>
    </div>
</div>

and css:

.wrapper {
  border: 1px solid;
  height: 600px;  //This is for test purposes and will be 100% of available height in flexbox grid
  text-align: center;
  justify-content:center;
}

.contentWrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}

I am trying to vertically align the text content but it is refusing to be vertical aligned. I don't want to set any height on the image as don't want to ruin it's aspect ration, but need content to always be aligned in the remaining space left at all screen sizes.

below is a jsfiddle: https://jsfiddle.net/a4n7drxf/

Any ideas on how to acheive this would be greatly appreciated

zeduke
  • 120
  • 2
  • 9
  • the first dup will show how to correctly fill the remaining space and the other will show how to vertical align text – Temani Afif Dec 14 '18 at 20:02
  • Thaank you for the links, I have tried many of them, for example this jsfiddle http://jsfiddle.net/156qkmus/ is from 2nd answer from this thread https://stackoverflow.com/questions/8865458/vertically-center-text-with-css and it reuqires a height on the content, which I do not want to set, If i set 100% height is will take the height of whole div, which again I do not want to set – zeduke Dec 14 '18 at 20:25
  • check the first duplicate to see how to fill remaining space and avoid setting any height ... And honestly I advise you to take the time to read all the question answers and try many things. I don't think 20min is enough to get all the tricks ... it will also be helpful for you instead of simply getting a ready working code. – Temani Afif Dec 14 '18 at 20:29
  • TL;DR of all the duplicates:http://jsfiddle.net/156qkmus/1/ – Temani Afif Dec 14 '18 at 20:54
  • @temani afif thank you for the jsfiddle! It helped a lot, the reason why I couldn't figure this out straight away was I had an `a` tag around the content and not the wrapper, this is why anything I done didn't change the vertical height, your answer definitely helped to solve this, so thank you very much :) – zeduke Dec 14 '18 at 22:06

0 Answers0