CODEWITHSUNDEEP
cssalignmentvertical-alignment
zgall1
zgall1

Reputation: 3025

How do I vertically center an image with a text block?

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?

Upvotes: 1

Views: 301

Answers (2)

fernandopasik
fernandopasik

Reputation: 10473

There's a quick correction that you need about the display property:

display: inline-block;

Here's a fiddle what you are wanting to accomplish. http://jsfiddle.net/pZb3Y/1/

Upvotes: 1

Artem Petrosian
Artem Petrosian

Reputation: 2954

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%;
}

Upvotes: 2

Related Questions