Menu icon Foundation
Align-middle Middle Issue

Hi, Hope someone maybe able to point me in the right direction>

The 3 sections in the middle "We are Accredited" and the lorem ipsum text. I want the text vertically centerd, but the grad-bg background to stretch the height of the image next to it.  At the min the text is in a light green band in the middle.  I have tried every single flex permutation I can think of :-(

 

			<div class="grid-x align-middle">

				<div class="small-12 medium-6 cell img-stretch">

					<img src="img/accreddited.png" alt="We Are Accredited">

				</div>

				<div class="small-12 medium-6 cell text-center gradbg">

					<div class="align-self-middle">
						<h3>We Are Accredited ....</h3>

						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>

				</div>

			</div>

flex

Hi, Hope someone maybe able to point me in the right direction>

The 3 sections in the middle "We are Accredited" and the lorem ipsum text. I want the text vertically centerd, but the grad-bg background to stretch the height of the image next to it.  At the min the text is in a light green band in the middle.  I have tried every single flex permutation I can think of :-(

 

			<div class="grid-x align-middle">

				<div class="small-12 medium-6 cell img-stretch">

					<img src="img/accreddited.png" alt="We Are Accredited">

				</div>

				<div class="small-12 medium-6 cell text-center gradbg">

					<div class="align-self-middle">
						<h3>We Are Accredited ....</h3>

						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					</div>

				</div>

			</div>
Rafi Benkual 3 months ago

Adding .align-middle to the .grid-x will not allow the flex children to stretch (be equal height).

You can make the img height 100% like this https://codepen.io/rafibomb/pen/MMGBBz

The size of the image will determine the height of the grid.


Liam O'Neill 3 months ago

Hi Rafi,

 

Thanks for the reply.  It's actually the green background behind the text to stretch 100% height.  I want the text center aligned but the background to be the fadebg.

 

Thanks

Liam O'Neill 3 months ago

Hi Rafi,

 

Thanks for the reply.  It's actually the green background behind the text to stretch 100% height.  I want the text center aligned but the background to be the fadebg.

 

Thanks

Liam O'Neill 3 months ago

Hi Rafi,

 

Thanks for the reply.  It's actually the green background behind the text to stretch 100% height.  I want the text center aligned but the background to be the fadebg.

 

Thanks

Liam O'Neill 3 months ago

Hi Rafi,

 

Thanks for the reply.  It's actually the green background behind the text to stretch 100% height.  I want the text center aligned but the background to be the fadebg.

 

Thanks

Liam O'Neill 3 months ago

Hi Rafi,

 

Thanks for the reply.  It's actually the green background behind the text to stretch 100% height.  I want the text center aligned but the background to be the fadebg.

 

Thanks