CODEWITHSUNDEEP
htmlcss
zazvorniki
zazvorniki

Reputation: 3602

vertically centering a floating image

I have a few buttons in my ui that have to have images floating next to the text and this is working well. However, I'm having issues vertically aligning that image to the text.

I've tried multiple things along with vertical-align: center;, trying to use absolute positioning, and I even tried some transform technique that failed spectacularly.

Now the content for these buttons is coming from users so it is dynamic, otherwise I would try to do something with line height and call it a day.

Any help would be amazing!

My html looks something like this.

<div class='btn-primary col-md-4'>
    <img  src='https://developers.google.com/web/fundamentals/imgs/placeholder--small.png'/ >
        <span class='imgInfo'>This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. This is info. </span>
        <p class='clearfix'></p>
</div>

and the css looks something like this.

img{
    vertical-align: middle;
    float:left;
    width:50%;
}

.imgInfo{
    margin-left: 0px;
    overflow:auto;
    display:block;
    float:right;
    width:50%;
    padding-left:1em
}

and a jsFiddle to plat with http://jsfiddle.net/52VtD/7356/

Upvotes: 0

Views: 135

Answers (3)

4dgaurav
4dgaurav

Reputation: 11496

Demo

css

img{
    float:left;
    width:50%;;
    position: absolute;
    top:0;
    bottom:0;
    margin: auto;
}

(ref: Smashing Magazine)

Explanation

After researching specs and documentation, this is how Absolute Centering works:

  1. In the normal content flow15, margin: auto; equals ’0′ for the top and bottom.
    W3.org16: If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.
  2. position: absolute; breaks the block out of the typical content flow, rendering the rest of the content as if that block weren’t there.
    Developer.mozilla.org17: …an element that is positioned absolutely is taken out of the flow and thus takes up no space
  3. Setting top: 0; left: 0; bottom: 0; right: 0; gives the browser a new bounding box for the block. At this point the block will fill all available space in its offset parent, which is the body or position: relative; container. Developer.mozilla.org1918: For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).
  4. Giving the block a width or a height prevents the block from taking up all available space and forces the browser to calculate margin: auto based on the new bounding box. Developer.mozilla.org1918: The margin of the [absolutely positioned] element is then positioned inside these offsets.
  5. Since the block is absolutely positioned and therefore out of the normal flow, the browser gives equal values to margin-top and margin-bottom centering the element in the bounds set earlier.
    W3.org20: If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values. AKA: center the block vertically

Absolute Centering appears to be the intended use for margin: auto; based on the spec and should therefore work in every standards compliant browser.

TL;DR: Absolutely positioned elements aren’t rendered in the normal flow, so margin: auto; centers vertically within the bounds set by top: 0; left: 0; bottom: 0; right: 0;.

Upvotes: 1

aniskhan001
aniskhan001

Reputation: 8521

You could use - 

img{
    position: absolute;
    width: 50%;
    top: 0;
    bottom: 0;
    left: 5px;
    margin: auto;
}

The top: 0; and bottom: 0; will prevent each other to touch the edge.
And margin: auto; will correctly align the img to center.

Working FIDDLE

Upvotes: 0

SouravMoitra
SouravMoitra

Reputation: 63

I would suggest that you use 

.img {
  margin-top:40%
}

instead of vertical-align.

Upvotes: 0

Related Questions