• Locked
No replies
Sun, 2015-04-05 19:10
jasonxweb
jasonxweb's picture
Offline
newbie
Last seen: 2 years 40 weeks ago
Timezone: GMT-8
Joined: 2014-05-27
Posts: 8
Points: 15

Hi everyone!

I am trying to vertically center divs inside another div, using:

position: relative;
vertical-align: middle;

But it's not working! Does anyone know why?

On this page: http://www.jasonwangart.com/p/about-web.html , I am trying to make the dividers - the vertical black lines - be vertically centered within the parent div.

You can see my code here:

<!doctype html>
 
<style>
 
	.jw-1-about-centre-align
	{		
		width: 300%;
 
		border: 0px solid red;
 
		font-size: 16px;
		background-color: rgba(255,255,255,0.0);
		text-align: center;
	}
 
	.jw-2-about-pad
	{		
		vertical-align: top;
		display: inline-block;
		min-width: 60px;	
		padding: 0px 0px 0px 0px;	
		border: solid rgba(0,0,0,0.2);
		border-width: 0px 1px 0px 1px;
		border-radius: 15px 15px 15px 15px / 30px 30px 30px 30px; 
		margin: 0px auto 0px auto;
 
		text-align: left;    
		font-size: 16px;
		background-color: rgba(255,255,255,0.3);
	}
 
	.jw-3-about-column
	{
		vertical-align: top;
		display: inline-block;
		border: 0px solid orange;
		width: 300px;
		height: 100%;
		margin: 10px 15px 10px 15px;	
	}	
 
	.jw-3-about-divider
	{
 
		display: inline-block;
		border: 0px solid green;
		width: 1px;
		height: 300px;
		margin: 0px 0px 0px 0px;	
		background-color: rgba(0,0,0,0.5);
 
		position: relative;
		vertical-align: middle;
	}		
 
	.jw-4-about-text-header
	{
		width: 100%;
		border: 0px solid green;
		margin: 20px auto 20px auto;	
		font-size: 1.2em;
		font-weight: bold;
		font-style: italic;
	}		
 
	.jw-4-about-text-body
	{
		width: 100%;
		border: 0px solid yellow;
		margin: 20px auto 20px auto;	
	}
 
</style>
 
<div class="jw-1-about-centre-align">
 
	<div class="jw-2-about-pad">
 
		<div class="jw-3-about-column">
 
			<div class="jw-4-about-text-header">
				About me:
			</div>		
 
			<!-- JUST SOME CODE FOR THE TEXT - OMITTED FOR SIMPLICITY -->
 
		</div>
 
		<div class="jw-3-about-divider">
		</div>
 
		<div class="jw-3-about-column">
 
			<div class="jw-4-about-text-header">
				<b>Contact me:</b>
			</div>			
 
			<!-- JUST SOME CODE FOR THE FORM - OMITTED FOR SIMPLICITY -->
 
		</div>				
 
 
		<div class="jw-3-about-divider">
		</div>
 
		<div class="jw-3-about-column">
 
			<div class="jw-4-about-text-header">
				<b>Email updates:</b>
			</div>
 
			<!-- JUST SOME CODE FOR THE FORM - OMITTED FOR SIMPLICITY -->
 
   		</div>
 
 
	</div>				
 
</div>	
 
</!doctype>

Top
Tags: