Center image in XHML page

**daemon** · Nov 5, 2003 03:38

Hello folks,

all I wanna do is put a small image right in the middle (horizontally and vertically) of the screen. (using a xhtml page WITHOUT tables).
Can anyone post how the code should look like?

THanks

**xDev** · Nov 5, 2003 03:53

HTML Code:

<html>
<head>
</head>
<body style="background: 
url(
[url]http://www.google.com/images/logo.gif[/url]
) 
center no-repeat">
</body>
</html>

-xDev

**daemon** · Nov 5, 2003 04:19

Thanks xDev.
But what if I want the image to be clickable (a link)?

**xDev** · Nov 5, 2003 04:57

Originally Posted by daemon

Thanks xDev.
But what if I want the image to be clickable (a link)?

Somehow I knew you were going to ask that

Now that's a much more complicated matter! You have to absolutely position the element (50%,50%) containing the image and then give it minus margins (at half of the dimensions). So the height of the image is 110 (I give the block a -55 top margin), the width is 276 (I give it a -138 left margin).

HTML Code:

<html>
<head>
<style type="text/css">
#picBlock {
	text-align: center;
	margin-top: -55px;
	margin-left: -138px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 276px;
	height: 110px;
}
</style>
</head>
<body style="text-align: center; margin: auto;">
<div id="picBlock">
<a href="http://www.google.com/">
<img src="http://www.google.com/images/logo.gif" 
border="0"
alt="Dead Center!" 
width="276" height="110" /></a>
</div>
</body>
</html>

-xDev

**daemon** · Nov 5, 2003 05:12

Thanks. That did the trick.

User Tag List

Thread: Center image in XHML page

Thread Tools

Display

Hybrid View

Center image in XHML page

Bookmarks

Bookmarks

Posting Permissions