Vertical Middle Align Text Block in Div

HTML & CSS
1

I’ve never fully grasped how to do this. I have two side by side divs, one on left with a youtube video, one on right with text.

I would like the text to be vertically aligned in the middle of the youtube video, which is changing height depending on browser size.

Here is the HTML:

<div class="vc_col-sm-6 wpb_column vc_column_container ">
	<div class="wpb_wrapper">
		<div class="wpb_raw_code wpb_content_element wpb_raw_html">
			<div class="wpb_wrapper">
				<div class="responsive-container">
					<iframe src="https://www.youtube.com/embed/4zsQ_7MxaRI?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
				</div>
			</div> 
		</div> 
	</div> 
</div> 

<div class="vc_col-sm-6 wpb_column vc_column_container ">
	<div class="wpb_wrapper">
		<div class="wpb_text_column wpb_content_element ">
			<div class="wpb_wrapper">
				<h2 style="text-align: left; vertical-align: middle;">Keeper is the revolutionary fashion app that discovers your taste in fashion and empowers the stylist in you</h2>
			</div> 
		</div> 
	</div> 
</div>

What CSS do I need to add to make this h2 always appear in the middle vertical of youtube video?

1262×448 205 KB

2

If I’m interpreting things correctly, you don’t

https://www.youtube.com/static?template=terms

If you use the Embeddable Player on your website, you may not modify, build upon, or block any portion or functionality of the Embeddable Player, including but not limited to links back to the YouTube website.

3

ugh . thats a mess of nested divs! I dunno what control you have over your markup, but what you would need to do is set the outer most wrapers of your text and video to display:inline-block; vertical-align: middle; this may have some weird effects tho if you already have some grid structure CSS going.

Since the vide is most likely to be the same widyth no matter what , is there a reason it can t be a sibling to the description container?

4

Lose the grid and do it in 20 divs less:)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	display:table;
	max-width:980px;
	width:100%;
	margin:auto;
}
.tc {
	display:table-cell;
	vertical-align:middle;
	padding:10px;
}
h2.tc {margin:0;}
</style>
</head>

<body>
<div class="wrap">
		<div class="video tc">
				<iframe src="https://www.youtube.com/embed/4zsQ_7MxaRI?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
		</div>
		<h2 class="tc">Keeper is the revolutionary fashion app that discovers your taste in fashion and empowers the stylist in you</h2>
</div>
</body>
</html>
5

Cool, thanks guys. A lot of this is janky code injected from their Visual Composer but I think I have enough to work with here.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.