I am trying to center an image within a container in a responsive
Wordpress web design. The URL of the problematic page is:
http://www.outtacontext.com/wp2/about/past5/ I have put an orange border
around the container to help show you the problem. When the viewport gets
very wide, the image is no longer centered within the container.
I have other similar pages where it is centered but this page is a bit
different. I'm using a Wordpress plugin for an image swap (roll over the
image and you will see it). This changes the code a bit and I can't get
the image centered.
The code for this page (I've identified in comments the code the WP plugin
adds and which I can't alter) is:
<body id="past_background">
<div class="past_center">
<div class="past5">
<!--Style added by image swap plugin -->
<style>
.himage
{
-webkit-transition: opacity .2s ease-out 0s;
-moz-transition: opacity .2s ease-out 0s;
-o-transition: opacity .2s ease-out 0s;
transition: opacity .2s ease-out 0s;
}
</style>
<!--div style added by plugin -->
<div style="position:relative;"><a
href="http://outtacontext.com/wp2/past6"; class="nounderline"><img
src="/wp2/wp-content/themes/sentence/images/past/past5_on.jpg" width=""
height="" />
<!--style, onmouseover, and onmouseout added by plugin -->
<img class="himage"
src="/wp2/wp-content/themes/sentence/images/past/past5_of.jpg" width=""
height="" onmouseover="this.style.opacity=0;"
onmouseout="this.style.opacity=1;" style="position:absolute; top:0;
left:0;" /></a></div></div>
<div class="text">
<p>When I graduated from high school I got about as far away from the
Valley as I could.</p>
</div>
The CSS I am using is, specific to this page:
#past_background div.past5 {
display: block;
margin-left: auto;
margin-right: auto;
width:60%;
border: 1px solid orange;
}
#past_background div.text {
display: block;
margin: 0 auto 0 auto;
width:34%;
}
Just for comparison, a page that doesn't use the plugin but does center
the image is http://www.outtacontext.com/wp2/about/past2-2/ (Ignore the
white border around the text. I'm just using the border to observe how
parts of the page work in the responsive design.). The CSS that does
center the image on this page is:
#past_background img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
But because of the rollover plugin and how it works, I can't use this
style on the problem page.
I'd love to know how I can keep the rollover images centered horizontally
within the past5 page.
Thanks, Jeff
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
