/    Sign up×
Community /Pin to ProfileBookmark

Need Help Centering an Image within a Elastic Div

Copy linkTweet thisAlerts:
Jul 20.2007

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.

[CODE]#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;
}[/CODE]

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

[CODE]<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>[/CODE]

Help would be much appreciated. ?

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@FarlandauthorJul 20.2007 — Any ideas? ?
Copy linkTweet thisAlerts:
@WebJoelJul 20.2007 — background: transparent url(graphics/brand.jpg) no-repeat [B]50% 50%[/B];


(no need for [B]margin-left:5%;[/B])
Copy linkTweet thisAlerts:
@amberfrancesJul 20.2007 — if it's the background image, can you center it like:

background-position: center;
Copy linkTweet thisAlerts:
@WebJoelJul 20.2007 — 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>[/QUOTE] here:

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image

?
Copy linkTweet thisAlerts:
@CentauriJul 21.2007 — 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.
[CODE]#brand a{
height:130px;
width:489px;
margin:35px auto 0;
background: transparent url(graphics/brand.jpg) no-repeat;
text-indent:-9999px;
display: block;
}[/CODE]
Copy linkTweet thisAlerts:
@FarlandauthorJul 22.2007 — 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.
[CODE]#brand a{
height:130px;
width:489px;
margin:35px auto 0;
background: transparent url(graphics/brand.jpg) no-repeat;
text-indent:-9999px;
display: block;
}[/CODE][/QUOTE]

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

Success!

Help @Farland spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...