/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] how the heck to center with absolute position

Copy linkTweet thisAlerts:
Mar 26.2013

ok here’s my css, I have been looking all over the blasted internet for how to center something in an absolute position but nothing is working..

[CODE]<div style=”position:absolute; width:100%; height:341px;”>
<img src=”pics/clinic1.jpg” width=”910″ id=”clinic1″ style=”position:absolute; top:0; margin-left:auto; margin-right:auto;”/>
<img src=”pics/clinic2.jpg” width=”910″ id=”clinic2″ style=”position:absolute; top:0; margin-left:auto; margin-right:auto;”/>
</div>[/CODE]

I have a script that fades in and out between the images but I needed to know how to put them both in the same spot on the page (centered) so that the effect works right… right now they just appear in the same spot but I cant get them to center. Help???

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@rtretheweyMar 26.2013 — Your code looks like you may not have a good understanding of position:absolute, but it's hard to tell from a code snippet that you may have edited to present here. For example, there's no 'top' or 'left' properties in the <div> and you've got it set to width:100%. That's almost self-contradictory unless you only need to control the vertical position of the <div>.

As shown, you'd probably get something close to what you want by removing the 'position' property from the <img> tags. With those tags set to position:absolute, the margin settings are ineffective. position:absolute removes the element from the normal document flow, so there's nothing for the margins to be aligned against. It might even be best to remove everything in the 'style' attribute of the <div> tag. My advice would be to start with:
<i>
</i>&lt;div style="text-align:center;"&gt;
&lt;img src="pics/clinic1.jpg" id="clinic1" style="width:910px;"/&gt;
&lt;img src="pics/clinic2.jpg" id="clinic2" style="width:910px;"/&gt;
&lt;/div&gt;

and see if that's closer to what you want.
Copy linkTweet thisAlerts:
@thewebiphyerauthorMar 26.2013 — well they are centered now, but they are appearing as static, as if there is a <br> inbetween them.. they are still fading in and out, but I need them to appear as if they are layered on top of each other. and with style="top:0px;" it wouldn't work because there is no positioning applied to the image other than static if I do it that way.
Copy linkTweet thisAlerts:
@jedaisoulMar 26.2013 — margin is the wrong attribute for absolute positioning. Use left and right for horizontal positioning, top and bottom for vertical. E.g.

position:absolute;

left:auto;

right:auto;
Copy linkTweet thisAlerts:
@rtretheweyMar 27.2013 — I didn't realize you wanted these images on top of each other. It reminded me of a trick I'd learned a while ago using a negative margin on positioned elements. Try:
<i>
</i>&lt;style type="text/css"&gt;
#clinicBox { position:relative; top:0; left:0; height:341px; }
#clinicBox img { position:absolute; top:0; left:50%; width:910px; margin-left:-455px; }
#clinic1 { z-index:1; }
#clinic2 { z-index:2; }
&lt;/style&gt;
&lt;div id="clinicBox"&gt;
&lt;img src="pics/clinic1.jpg" id="clinic1"/&gt;
&lt;img src="pics/clinic2.jpg" id="clinic2"/&gt;
&lt;/div&gt;

This code should keep the images centered no matter how wide or narrow the containing <div> is set, and the images will be stacked on top of one another.
Copy linkTweet thisAlerts:
@thewebiphyerauthorMar 27.2013 — thx to everyone... doing this:
[CODE]position:absolute; right:auto; left:auto;[/CODE]
didn't work, but I did figure out a work around... it works great
[CODE]<div style="position:absolute; text-align:center; width:98%; height:341px; top:0px;" align='center'>
<img src="pics/clinic1.jpg" width="910" id="clinic1"/></div>
<div style="position:absolute; text-align:center; width:98%; height:341px; top:0px;" align='center'>
<img src="pics/clinic2.jpg" width="910" id="clinic2"/></div>[/CODE]
×

Success!

Help @thewebiphyer 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.19,
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,
)...