Align Img Vertically within Div HTML and CSS

Question

I have found the following solution for aligning an img vertically within a div

https://stackoverflow.com/a/7310398/626442

and this works great for a basic example. However, I have had to extend this and I want a row with two bootstrap col-md-6 columns in it. In the first column I want a 256px image, in the second I want a h1, p and a button. I have to following HTML:

<div class="home-costing container">
    <div class="row">
        <div class="frame">
            <span class="helper"></span>
            <div class="col-md-6">
                <img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" />
            </div>
            <div class="col-md-6">
                <h2>Header</h2>
                <p>
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br /><br/>
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
                </p>
                <a class="btn btn-default"
                   href='@Url.Action("Index", "Products")'
                   role="button">
                    Learn More
                </a>
            </div>
        </div>
    </div>
</div>

and the following CSS:

.home-costing {
   color: #fff;
   text-align: center;
   padding: 50px 0;
   border-bottom: 1px solid #ff6500;
}

.home-costing h2 {
   text-transform: uppercase;
   font-size: 60px;
}

.home-costing p {
   font-size: 18px;
}

.home-costing .frame {
   height: 256px;
   width: 256px;
   border: 0;
   white-space: nowrap;
   text-align: center; 
   margin: 1em 0;
}

.home-costing .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.home-costing img {
    vertical-align: middle;
    max-height: 256px;
    max-width: 256px;
}

The problem is that now the second column is no longer contained and the text does not wrap and goes off to the right.

How can I center align my image in the first column with the text in the right column and still get the correct wrapping in the second column?

Fiddler: https://jsfiddle.net/Camuvingian/1sc40rm2/2/

For one thing, unless your text is actually going to be one really long string of one letter, this demo is not accurate. One really long word does not wrap on its own. You have to add `word-wrap: break-word;` to force it. Anyways, here's a demo of what I think you're going for: [JSFiddle](https://jsfiddle.net/1sc40rm2/3/) — Liftoff, Sep 16 '15 at 13:42
What is it that you have done to get this? It is not quite what I want, I want the image centered vertically with the contents of the right column. Thanks very much for your time here, it is most appreciated. Also, it I merely use two columns the wording wraps without issue... — MoonKnight, Sep 16 '15 at 13:47
If you want it vertically centered, just change vertical-align: top to vertical-align: middle; [JSFiddle](https://jsfiddle.net/1sc40rm2/4/). All of the CSS I added is in the first rule at the top of the CSS section. — Liftoff, Sep 16 '15 at 13:49
An image of what this is supposed to look like would be useful I think. However, you can't easily align children of two dfferent parents with CSS. — Paulie_D, Sep 16 '15 at 13:51
This does not vertically align the image centrally. It is still aligned top. Thanks very much all for your time. — MoonKnight, Sep 16 '15 at 14:00
If you have IMG inside DIV you can use flexbox to align it vertically and/or horizontally: `div { display: flex; } img { margin: auto; }`. Use http://autoprefixer.github.io/ to get the right browser prefixes. — starikovs, Sep 16 '15 at 14:00

score 0 · Answer 1 · 2015-09-16T13:59:05.533

Your HTML needed updated, in Bootstrap, the div order should ALWAYS go .container > .row > .col- * - *, your code however went .container > .row > .frame > .col- * - *. I have corrected your HTML and now your code works.

HTML:

<div class="home-costing container">
    <div class="row">
            <div class="col-md-6">
                <img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" class="center-block" />
            </div>
            <div class="col-md-6">
                <h2>UserCost</h2>
                <p>Hello, I'm a paragraph</p>
                <a class="btn btn-default"
                   href='@Url.Action("Index", "Products")'
                   role="button">
                    Learn More
                </a>
            </div>
        </div>
    </div>
</div>

Link to finished code example: Codepen - Updated & working code

This fixes the word wrap issue also on the p tag.

CSS:

p {
   font-size: 18px;
    word-wrap: break-word;
}

Almost, but the image is still aligned to the top of the first column. You can see this if you add more text. Thanks very much for your time... — MoonKnight, Sep 16 '15 at 14:01
It aligns the image top, if you add some `
`s and more text you will see this... Thanks again for your help. — MoonKnight, Sep 16 '15 at 14:10

Align Img Vertically within Div HTML and CSS

1 Answers1