jasonxweb Posted April 5, 2015 Share Posted April 5, 2015 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> Link to comment Share on other sites More sharing options...
mannemvamsi Posted April 17, 2015 Share Posted April 17, 2015 I didn't go through your code. But I understand that you need to place a div vertically center inside another one. you can do something like this. .vertical-center { position:relative; top:50%; transform:translateY(-50%);} Demo available here Link to comment Share on other sites More sharing options...
tejasamrute Posted April 17, 2015 Share Posted April 17, 2015 try this way <style type="text/css">#wrapper{ width: 980px; height:220px; background: green; box-sizing: border-box; margin:0 auto; padding:10px; }.center-container { margin:0 auto; background-color:orange; width:900px;}.block{ text-align: center; width: 300px; height:200px; line-height:200px; display: inline-block; vertical-align:middle; margin: 0px -4px; }.sep{ content: ""; display: inline-block; width: 0px; vertical-align:middle; height: 150px; border-right: 1px solid #fafafa; border-left: 1px solid #b4b4b4; padding: 0;}</style></head><body><div id="wrapper"> <div class="center-container"> <div class="block">About Me</div> <div class="sep"></div> <div class="block">Contact Me</div> <div class="sep"></div> <div class="block">Email Updates</div> </div></div> Note:--- this code doesnt work in IE7 Link to comment Share on other sites More sharing options...
dsonesuk Posted April 18, 2015 Share Posted April 18, 2015 This will adjust to content height automatically. For percentage height divider change margin-top:-150px; to margin-top: -50%; <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> body, html {height: 100%; padding: 0; margin: 0;} .jw-1-about-centre-align { /*width: 300%; removed by dsonesuk*/ 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; amended by dsonesuk*/ display: table; 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); position: relative; } .jw-3-about-column { vertical-align: top; display: inline-block; border: 0px solid orange; width: 300px; height: 100%; margin: 10px 15px 10px 15px; min-height: 400px; } .jw-3-about-divider { /*display: inline-block; amended by dsonesuk*/ display: table-cell; border: 0px solid green; margin: 0px 0px 0px 0px; position: relative; width: 1px; } .jw-3-about-divider:after{ position: absolute; /*vertical-align: middle;*/ content: ""; top:50%; left:0; right:0; margin-top: -150px; /* half of container height*/ /* margin-top: -50% for percentage set height */ background-color: rgba(0,0,0,0.5); height: 300px; width: 1px; } .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> </head> <body> <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> <p> Lorem ipsum dolor sit amet, consectetur adipisicing 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> <p> Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst. </p> <p> Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus, scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero. </p> <p> Proin nonummy, lacus eget pulvinar lacinia, pede felis dignissim leo, vitae tristique magna lacus sit amet eros. Nullam ornare. Praesent odio ligula, dapibus sed, tincidunt eget, dictum ac, nibh. Nam quis lacus. Nunc eleifend molestie velit. Morbi lobortis quam eu velit. Donec euismod vestibulum massa. Donec non lectus. Aliquam commodo lacus sit amet nulla. Cras dignissim elit et augue. Nullam non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Aenean vestibulum. Sed lobortis elit quis lectus. Nunc sed lacus at augue bibendum dapibus. </p> <!-- 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> <p> Lorem ipsum dolor sit amet, consectetur adipisicing 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> <p> Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst. </p> <!-- 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> <p> Lorem ipsum dolor sit amet, consectetur adipisicing 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> <p> Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst. </p> <p> Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis. Donec vitae metus. Morbi tristique neque eu mauris. Quisque gravida ipsum non sapien. Proin turpis lacus, scelerisque vitae, elementum at, lobortis ac, quam. Aliquam dictum eleifend risus. In hac habitasse platea dictumst. Etiam sit amet diam. Suspendisse odio. Suspendisse nunc. In semper bibendum libero. </p> <!-- JUST SOME CODE FOR THE FORM - OMITTED FOR SIMPLICITY --> </div> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
jasonxweb Posted April 19, 2015 Author Share Posted April 19, 2015 Thanks everyone for your response! Tezzo, thank you for your suggestion. It looks like the .sep div will only centre vertically if the .block div is also set to "vertical-align:middle". If I change the .block div to "vertical-align:top", then the .sep div will not center vertically, even if it is still set to "vertical-align:middle". Do you know if there's a way to set .sep to centre vertically while .block is set to align to top? Thank you. Link to comment Share on other sites More sharing options...
jasonxweb Posted April 19, 2015 Author Share Posted April 19, 2015 Thanks everyone for your suggestions. Here is what worked in the end: <style> #jw-1-about-centre-align { width: 300%; border: 0px dashed red; background-color: rgba(255,255,255,0.0); text-align: center; } #jw-2-about-pad { display: inline-block; padding: 20px 30px; border: solid rgba(0,0,0,0.2); border-width: 0px 1px; border-radius: 15px 15px 15px 15px / 30px 30px 30px 30px; text-align: left; font-size: 16px; background-color: rgba(255,255,255,0.3); } .jw-3-about-column-content { display: table-cell; border: 0px dashed orange; width: 300px; } .jw-3-about-column-divider { display: table-cell; vertical-align: middle; border: 0px dashed green; height: 100px; /* KEEP */ background-color: rgba(255,255,255,0); } .jw-4-about-divider { border: 0px dashed blue; width: 1px; height: 90%; margin: 0px 20px; background-color: rgba(0,0,0,0.4); } </style> <div id="jw-1-about-centre-align"> <div id="jw-2-about-pad"> <div class="jw-3-about-column-content"> <!-- JUST CODE FOR ABOUT INFO --> </div> <div class="jw-3-about-column-divider"> <div class="jw-4-about-divider"> </div> </div> <div class="jw-3-about-column-content"> <!-- JUST CODE FOR CONTACT FORM --> </div> <div class="jw-3-about-column-divider"> <div class="jw-4-about-divider"> </div> </div> <div class="jw-3-about-column-content"> <!-- JUST CODE FOR MAILING LIST --> </div> </div> </div> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now