JSFiddle - React, Tailwind, and code Playground

by kizu

HTML

<div class="DivParent">
    <div class="DivWhichNeedToBeVerticallyAligned">
        one line
    </div><div class="DivHelper"></div>
</div>
<div class="DivParent">
    <div class="DivWhichNeedToBeVerticallyAligned">
        <p>Two</p>
        <p>Lines</p>
    </div><div class="DivHelper"></div>
</div>
<div class="DivParent">
    <div class="DivWhichNeedToBeVerticallyAligned">
        <img src="http://placekitten.com/50/50" style="display:block;" alt="some image" />
    </div><div class="DivHelper"></div>
</div>

<!--[if lte IE 7]>
    <style>
        .DivWhichNeedToBeVerticallyAligned,
        .DivHelper {
            display: inline;
            zoom: 1; 
        }
    </style>
<![endif]-->

CSS

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.DivWhichNeedToBeVerticallyAligned {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}