Jump to content

Why isnt my image verticaly centered?


rain13
 Share

Recommended Posts

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

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

<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

There's problem with top 50% - if you try with some larger image such as

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

 

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 by dsonesuk
Link to comment
Share on other sites

<!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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...