Need Help Centering an Image within a Elastic Div [Archive]

Farland

07-19-2007, 09:47 PM

Okay, what I mean by an elastic div is one without a set width, but which expands and contracts based on browser size. I'm trying to center an image within that div but not having any luck. I've tried auto margins.

Here's my code. Right now I have a 5% margin, which is just a workaround for the moment.

#brand a{
height:130px;
width:489px;
top:35px;
background: transparent url(graphics/brand.jpg) no-repeat;
text-indent:-9999px;
position:absolute;
margin-left:5%;
overflow:hidden;
}

#brand a:hover {
background-position: 0 -130px;
}

And here's the html. You'll see it's wrapped in content and content back, both of which don't have set widths.

<body>
<div id="wrap">
<div id="head"><a href="index.html"><h1>Blah</h1></a></div>
<div id="metal"><h1>blah</h1></div>
<div id="contentback">
<div id="content">
<div id="lhead"><h1>blah:</h1></div>
<div id="rhead"><h2>blah</h2></div>
<div id="tophead"><h2>blah</h2></div>
<div id="brand"><a href="index.html"><h2>blah</h2></a></div>

Help would be much appreciated. :D

Farland

07-20-2007, 01:09 PM

Any ideas? :)

WebJoel

07-20-2007, 02:48 PM

background: transparent url(graphics/brand.jpg) no-repeat 50% 50%;

(no need for margin-left:5%;)

amberfrances

07-20-2007, 05:01 PM

if it's the background image, can you center it like:

background-position: center;

WebJoel

07-20-2007, 05:53 PM

either will work. "center", or "50% 50%" It is both "background-position". I just wrote it shorthand:
Copy & paste this:<html>
<head>
</head>
<body>
<div style="width:200px; height:200px; margin: 25px auto; border:1px solid red; background:#fff url('bgdesert.jpg') no-repeat 50% 50%"></div>
</body>
</html> here:
http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image

:)

Centauri

07-21-2007, 12:07 AM

Auto margins for centering won't work on inline elements, nor can you assign inline elements a width. You also cannot centre an absolute positioned element as it is out of the document flow. Block display will solve most of your problems.
#brand a{
height:130px;
width:489px;
margin:35px auto 0;
background: transparent url(graphics/brand.jpg) no-repeat;
text-indent:-9999px;
display: block;
}

Farland

07-22-2007, 02:20 PM

Auto margins for centering won't work on inline elements, nor can you assign inline elements a width. You also cannot centre an absolute positioned element as it is out of the document flow. Block display will solve most of your problems.
#brand a{
height:130px;
width:489px;
margin:35px auto 0;
background: transparent url(graphics/brand.jpg) no-repeat;
text-indent:-9999px;
display: block;
}

Centauri, that didn't solve most of my problems... it solved all of them. :) Thank you very much.