I have a text block and image that you can see here (the site is not online yet).
I would like to centre the image on the right at the vertical middle of the text block.
The code I am currently using is below. As you will see, I've tried using display-inline:block; vertical-align:middle on both of the divs but it doesn't seem to have the intended effect.
<div class="x-column vc one-half" style="font-size:128%; display-inline:block; vertical-align:middle;">
<p class="p1">The electronics we pick up are transported to our state-of-the-art recycling facility in Brampton,Ontario. As the trucks are unloaded, each company’s material is independently weighed, allowing us to issue a customized Certificate of Recycling for diverted material. Electronics are then sorted into various grades that are either mechanically shredded or manually dismantled. Shift Recycling is an OES-approved primary processor, meaning that our recycling facility is fully compliant with all environmental regulations. Any hazardous materials such as lead glass are handled in a manner safe for the environment and our employees.</p>
<p class="p2">At the end of our recycling process, we send our raw commodities such as plastic and metal<em> (where?)</em>. These items are sent to approved downstream refiners who melt them down to create new products including plastic outdoor furniture and metal construction rebar.</p>
</div>
<div class="x-column vc one-half" style="display-inline:block; vertical-align:middle;">
<img class="x-img center-text x-img-rounded none" style=" margin-left: auto; margin-right: auto; " src="http://click2recycle.ca/wp-content/uploads/2014/05/plantSmall.png" alt="The Recycling Facility">
</div>
Edit
I've tried both of the suggestions below but unfortunately, the page now looks like this with the image below the text column. I should have mentioned that I am using a WordPress theme (called X) to build this site and I am now starting to worry that it is part of the problem. Is there any more information I can provide that might help?
You are using wrong selector name, should be
display: inline-block;
Also, you should specify the width for both blocks, e. g. 40% and 50%
PS: I've recommend you to avoid using inline styles into your HTML, the good practice to specify styles into separate .css file, like this:
.x-column {
display: inline-block;
vertical-align: middle;
width: 49%;
}
.x-column img {
width: 90%;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments