rain13 Posted June 8, 2015 Share Posted June 8, 2015 In this html code, image is aligned to top. <html> <head> <style> .frame { height: 100%; width: 100%; background-color: blue; text-align: center; } img { background: #3A6F9A; vertical-align: middle; } </style> </head> <body> <div class=frame> <img src="http://jsfiddle.net/img/logo.png"/> </div> </body></html> But here with same code it's in the middle:http://jsfiddle.net/vxruk9jq/Could anyone tell me why this html file doesnt work as I want but code linked below code snippet works? And how could I fix my code? Link to comment Share on other sites More sharing options...
dsonesuk Posted June 8, 2015 Share Posted June 8, 2015 Looks same to me, at the top, 100% height wont work unless html and body have 100% height too. Link to comment Share on other sites More sharing options...
rain13 Posted June 9, 2015 Author Share Posted June 9, 2015 I tried with different browsers and if I open the html file which code is above, image is at the top, not in the middle. So what shall I change in code? Link to comment Share on other sites More sharing options...
tejasamrute Posted June 9, 2015 Share Posted June 9, 2015 vertical-align only works with display: inline, inline-block, table-cells... there are so many ways to vertically center an elements in a div You can even center it without vertical-align property.......1 i used was very simple.. Just add img { background: #3A6F9A; position: relative; top: 50%;} Link to comment Share on other sites More sharing options...
dsonesuk Posted June 9, 2015 Share Posted June 9, 2015 That will not be middle, you need minus top margin half the height of image to bring it in middle . Link to comment Share on other sites More sharing options...
tejasamrute Posted June 9, 2015 Share Posted June 9, 2015 do i need to mention body,html should be 100%?.......i will try it out Link to comment Share on other sites More sharing options...
tejasamrute Posted June 9, 2015 Share Posted June 9, 2015 <head><style type="text/css"> body,html { height:100%; margin:0; padding:0; } .frame { height: 100%; width: 100%; background-color: blue; text-align: center; } img { background: #3A6F9A; position: relative; top: 50%; } </style> </head> <body> <div class=frame> <img src="http://jsfiddle.net/img/logo.png"/> </div> </body> Link to comment Share on other sites More sharing options...
rain13 Posted June 9, 2015 Author Share Posted June 9, 2015 There's problem with top 50% - if you try with some larger image such as <img src="http://media-cdn.tripadvisor.com/media/photo-s/01/e4/f8/e6/another-view-of-landscape.jpg"/> you will notice that it's rather bottom than in middle. I need size independent solution.Here's a new code I've made but can anyone tell me why the image disappears when browser window is too narrow (when browser window width < image width)? <html> <head> <style> #header { position: fixed; top:0px; left:0px; height: 100%; width: 100%; background: #000; text-align: center; } #header:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } #header > div, #header > img { vertical-align: middle; max-width:100%; max-heigth: 100%; } </style> </head> <body> <div id="header"> <span style="background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 100px; top: 0px; right: 0px; position: absolute;">Close</span><span style="color: white; width: 100px; top: 0px; position: fixed; left: 0px;">Title of image</span><img src="http://media-cdn.tripadvisor.com/media/photo-s/01/e4/f8/e6/another-view-of-landscape.jpg"> </div> </body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted June 9, 2015 Share Posted June 9, 2015 (edited) you will notice that it's rather bottom than in middle. I need size independent solution. SEE POST #5 top: 50%; means image will appear AFTER 50%, what you need to do is take in to account the height of image, the image centre should be at top: 50%; The best option is to use display: table; outer container, with display: table-cell; inner container, then use vertical align; Edited June 9, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted June 9, 2015 Share Posted June 9, 2015 <!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"> html, body {margin: 0; padding:0; height: 100%; } .outer_table {display: table; height: 100%; margin: 0 auto; } .middle {display: table-cell;vertical-align: middle;} .inner {display: inline-block; position: relative; font-size: 0;} .inner > * {font-size:16px;} #header .inner span {background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 100px; top: 0px; right: 0px; position: absolute;} #header .inner span:first-child ~ span {background: none; color: white; left: 0px;} </style> </head> <body> <div class="outer_table"> <div id="header" class="middle"> <div class="inner"> <span>Close</span><span>Title of image</span><img src="http://media-cdn.tripadvisor.com/media/photo-s/01/e4/f8/e6/another-view-of-landscape.jpg" alt=""> </div> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
rain13 Posted June 9, 2015 Author Share Posted June 9, 2015 Tnx. 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