/    Sign up×
Community /Pin to ProfileBookmark

Align image (been working on this all day!)

Copy linkTweet thisAlerts:
Jan 13.2011

Hi,

I have a script on my page that toggles the visibility of content inside of a <div> tag when a link is clicked. I have an image inside this hidden content that I would like to center but just can’t. I have looked all through Google to try to find the answer and I have tried every solution I could find, but nothing works. The example code is below. Please help!

CSS:

<style>
.centeredImage{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
</style>

Script:

<script type=”text/javascript”>
<!–
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == ‘block’)
e.style.display = ‘none’;
else
e.style.display = ‘block’;
}
//–>
</script>

HTML:
<a href=”#” onclick=”toggle_visibility(‘toggle’);return false;”>Link to toggle display</a>

<div id=”toggle” style=’display:none; margin:auto’ class=”data”>text content here<br>
<p class=”centeredImage”><a href=”thankyou.html”><img src=”IMAGE-THAT-SHOULD-BE-CENTERED.gif” class=”centeredImage” width=”150″ height=”44″ border=”0″ id=”Image1″ onmouseover=”MM_swapImage(‘Image1′,”,’image.gif’,1)” onmouseout=”MM_swapImgRestore()” /></a></p>
</div>

PLEASE HELP!!! I’ve been working on this for forever!

to post a comment
CSS

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@donatelloJan 13.2011 — [code=html]
<style>
div.centeredImage{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}

[/code]

If you want to toggle the visibility, see my robots generator page that is linked in my signature. I wrote a cool one that works and is stuck in the bottom right hand corner of the page.

Good luck.

?
Copy linkTweet thisAlerts:
@k_croftauthorJan 13.2011 — Thanks for your help donatello, but toggling the visibility is not he problem here.... I already have that code working. The problem is centering images within the content that is to be toggled (ie. with display:none).

The CSS code you gave me is nearly identical to the one I am currently using that isn't working. I tried adding "div" before the ".centerImage" and it did nothing.

Anyone else?
Copy linkTweet thisAlerts:
@markle976Jan 13.2011 — try this:

[CODE]
<a href="#" onclick="toggle_visibility('toggle');return false;">Link to toggle display</a>

<div id="toggle" style='display:none; margin:auto' class="data">
text content here<br />
<a href="thankyou.html">
<img src="IMAGE-THAT-SHOULD-BE-CENTERED.gif" class="centeredImage" width="150" height="44" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','image.gif',1)" onmouseout="MM_swapImgRestore()" />
</a>
</div>
[/CODE]

[CODE]
.centeredImage {
margin:0 auto 0 auto;
padding:0;
}
[/CODE]

p tag is unnecessary.
Copy linkTweet thisAlerts:
@k_croftauthorJan 13.2011 — I changed the CSS to look like your example and took out the p tag while adding the class="centeredImage"

But it still didn't work =/
Copy linkTweet thisAlerts:
@tracknutJan 13.2011 — Seems to me you'd need a width defined for the #toggle div. Have you tried that?

Dave
Copy linkTweet thisAlerts:
@markle976Jan 13.2011 — Try adding text-align:center to the #toggle div.
Copy linkTweet thisAlerts:
@k_croftauthorJan 13.2011 — Unfortunately neither of these options worked.

Setting the width didn't appear to have any effect. When I set the toggle div to text-align:center it centers all of the text but not the image. Besides, I don't want the text centered. I appreciate your help though!
Copy linkTweet thisAlerts:
@k_croftauthorJan 13.2011 — You can see an example of the page here: http://www.gatorsmarchforbabies.org/register.html
Copy linkTweet thisAlerts:
@markle976Jan 14.2011 — Ok. This should work:

  • 1. wrap the link in a div with class of listbutton (or something)


  • 2. add this this to the css:


    • [CODE]div.listbutton {
    width: 150px;
    margin: 0 auto;
    }[/CODE]

    The reason it is causing trouble is because the parent li's are text-align:justified;
    Copy linkTweet thisAlerts:
    @k_croftauthorJan 14.2011 — That's it!!!!!!! Woohoo! Thank you so much markle976! I've been working on that forever! I really appreciate your help.

    While we're at it, do you know how I would get a line break (like <br>) show up just AFTER the centered image? Nothing I add will produce the effect of a space between the image and the next paragraph.
    Copy linkTweet thisAlerts:
    @k_croftauthorJan 14.2011 — Nevermind.... figured it out =)
    Copy linkTweet thisAlerts:
    @markle976Jan 14.2011 — Awesome! Glad to help!
    ×

    Success!

    Help @k_croft 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.8,
    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,
    )...