How to put image in the center of browser window

  • (2 Pages)
  • +
  • 1
  • 2

16 Replies - 21926 Views - Last Post: 29 September 2010 - 03:00 PM

#1 pixelz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 12-June 05

How to put image in the center of browser window

Posted 21 February 2006 - 03:17 PM

I have one image in HTML (PHP) page. How to put image in center (verticaly and horizontaly) of the browser window.
Explanation: Somebody have 800x600, somebody 1024x760 ...
Is This A Good Question/Topic? 0
  • +

Replies To: How to put image in the center of browser window

#2 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: How to put image in the center of browser window

Posted 21 February 2006 - 05:14 PM

The easiest way I know of is to create a table that covers 100% of the page vertically and horizontally. Then use "vertical-align: middle;" and "text-align: center;" in CSS.
Was This Post Helpful? 0
  • +
  • -

#3 pixelz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 12-June 05

Re: How to put image in the center of browser window

Posted 22 February 2006 - 03:54 AM

Do you mean like this:

<style type="text/css">
<!--
body {
vertical-align: middle;
text-align: center;
}

-->
</style>

This doesn't work!
Was This Post Helpful? 0
  • +
  • -

#4 dec1pher  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 116
  • Joined: 27-January 06

Re: How to put image in the center of browser window

Posted 22 February 2006 - 09:49 AM

no he meant a table, but i prefer divs
<style type = "text/css">
#centerDIV {
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}
</style>

...
<body>
<div id = "centerDIV"><img...></div></body>...


This post has been edited by dec1pher: 22 February 2006 - 09:50 AM

Was This Post Helpful? 0
  • +
  • -

#5 pixelz  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 12-June 05

Re: How to put image in the center of browser window

Posted 24 February 2006 - 03:47 AM

Still doesen't work java script:emoticon(':sleepy:')
smilie
Was This Post Helpful? 0
  • +
  • -

#6 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 84
  • View blog
  • Posts: 3,564
  • Joined: 31-March 03

Re: How to put image in the center of browser window

Posted 24 February 2006 - 10:43 AM

You may need to add "position: absolute;" to #centerDIV. Methinks the way it's currently setup is that the <div> is a child of <body> so it inherts it's width, height, etc.
Was This Post Helpful? 0
  • +
  • -

#7 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: How to put image in the center of browser window

Posted 28 February 2006 - 06:27 PM

It isn't possible to use the vertical-align property alone to center page content in <divs> for both Mozilla-based browsers and Internet Explorer. You can do so with hacks but I'm strongly against them.

What I meant: Upon testing this method, I realized that the vertical-align property wasn't needed since a table vertically aligns its content by default. This is also independent of resolution, so no worries there. There is a caveat though: for Mozilla, the browser must be in "quirks mode" and for Internet Explorer, it must be in either "quirks" or "almost standards" mode. For a list of which doctypes activate which mode, go here and scroll down to the table. The reason is because in standards modes these browsers will not allow you to set a height based on a percentage. Example:

<table style="height: 100%; width: 100%;">
<tr><td style="text-align: center;"><img src="image.png"></td></tr>
</table>

Since you're using a single image, it is possible to accomplish the same thing using a <div> by cutting the image in half horizontally. This appears to work regardless of doctype. Example:

<div style="margin-left: auto; margin-right: auto; width: IMAGE WIDTH;">
<img src="top_half.png" style="position: absolute; bottom: 50%;"/>
<img src="bottom_half.png" style="position: absolute; top: 50%;"/>
</div>

The top image's bottom border is 50% from the bottom of the page and the bottom image's top border is 50% from the top of the page. If the heights of both halves of the image match, the image will appear to be vertically centered in any monitor resolution.

Hope this helps.

Code tested in Firefox 1.5 and Internet Explorer 6.0 SP2.

This post has been edited by Arbitrator: 28 February 2006 - 06:31 PM

Was This Post Helpful? 0
  • +
  • -

#8 dandmb50  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 25-November 09

Re: How to put image in the center of browser window

Posted 25 November 2009 - 03:54 PM

View Posthotsnoj, on 24 Feb, 2006 - 09:43 AM, said:

You may need to add "position: absolute;" to #centerDIV. Methinks the way it's currently setup is that the <div> is a child of <body> so it inherts it's width, height, etc.


I'm trying to put a link of a photo in a forum. All that is showing up is the html link instead of just a title?

http://i78.photobuck...wMelter-2-1.jpg

I did html many years ago and forget how to do it?
Was This Post Helpful? 0
  • +
  • -

#9 dandmb50  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 25-November 09

Re: How to put image in the center of browser window

Posted 27 November 2009 - 10:45 AM

View Postdandmb50, on 25 Nov, 2009 - 02:54 PM, said:

View Posthotsnoj, on 24 Feb, 2006 - 09:43 AM, said:

You may need to add "position: absolute;" to #centerDIV. Methinks the way it's currently setup is that the <div> is a child of <body> so it inherts it's width, height, etc.


I'm trying to put a link of a photo in a forum. All that is showing up is the html link instead of just a title?

http://i78.photobuck...wMelter-2-1.jpg

I did html many years ago and forget how to do it?


Think I got it now....

picture
Was This Post Helpful? 0
  • +
  • -

#10 biggles2008  Icon User is offline

  • Bassface
  • member icon

Reputation: 9
  • View blog
  • Posts: 623
  • Joined: 05-March 08

Re: How to put image in the center of browser window

Posted 04 December 2009 - 07:06 PM

Horizontally centering:

Make a div - HTML:

<div id="wrapper">
<img src="someimage.jpg" />
</div>



The css to that
#wrapper {
margin: 0 auto;
width: 600px;
}





Vertically centering a div
You will need two divs
  • vmiddle
  • content


#vmiddle
{
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
display: block
}



#content
{
width: 250px;
height: 70px;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
visibility: visible
}



Found on hackzle

Hope this solves your problem and you have learned something :)
Was This Post Helpful? 0
  • +
  • -

#11 Guest_G*


Reputation:

Re: How to put image in the center of browser window

Posted 05 July 2010 - 03:56 AM

put a image tag inside the div tag

ex:
<div align="center">
<img src="picname.jpg"/>
</div>
Was This Post Helpful? 0

#12 husseycoding  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 52
  • View blog
  • Posts: 174
  • Joined: 23-June 10

Re: How to put image in the center of browser window

Posted 05 July 2010 - 04:37 AM

I know this is the CSS section of the forums, but you can do this kind of thing very simply using javascript also. This function will center the div horizontally and vertically, works in both FF and IE and will not let the div move off the edge of the page on the left hand side or the top. Just replace 'mydivwidth' and 'mydivheight' with the width and height of the div to be centered, and 'mydiv' with the id of the div to be centered:

function setdivposition()
{
    fromleft=(window.innerWidth-mydivwidth)/2;
    if (!fromleft)
    {	
        fromleft=(document.body.clientWidth-mydivwidth)/2;
    }		
    if (fromleft<0)
    {			
        fromleft=0;	
    }			
    document.getElementById('mydiv').style.left=fromleft+"px";

    fromtop=(window.innerHeight-mydivheight)/2;
    if (!fromtop)
    {	
        fromtop=(document.body.clientHeight-mydivheight)/2;
    }		
    if (fromtop<0)
    {			
        fromtop=0;	
    }			
    document.getElementById('mydiv').style.top=fromleft+"px";
}


Add a call to the function in the body tag for when the page loads:

onload="setdivposition()"


And add a call to the function within the javascript section for when the page resizes:

window.onresize = setdivposition;

Was This Post Helpful? 0
  • +
  • -

#13 oneal.michaels  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 116
  • Joined: 25-June 10

Re: How to put image in the center of browser window

Posted 06 July 2010 - 07:36 PM

<style>
img#centeredImage
{
width:500px;
height:500px;
position:fixed;
left:50%;
top:50%;
margin-top:-250px;
margin-left:-250px;
}
</style>

<img id="centeredImage" src="image.."/>



you can the width and height to whatever you want and then change the margin-top to -(yourHeight/2) and margin-left to -(yourWidth/2)
Was This Post Helpful? 0
  • +
  • -

#14 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,227
  • Joined: 08-June 10

Re: How to put image in the center of browser window

Posted 06 July 2010 - 08:35 PM

you could even set it as background image and use background-position: center;

This post has been edited by Dormilich: 06 July 2010 - 08:35 PM

Was This Post Helpful? 0
  • +
  • -

#15 oneal.michaels  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 116
  • Joined: 25-June 10

Re: How to put image in the center of browser window

Posted 06 July 2010 - 08:50 PM

Then it would be covered up... im not sure if OP wants that.. just a thought
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2