Drempd Web Design
home portfolio blog resume
home portfolio

Vertical Center an Image Within a Link (or Div)

How to vertically center an image within a div: 

<style>
    .valign-helper{
        display: inline-block;
        height: 90px;
    }
    a img{
        display: inline-block;
        vertical-align: middle;
    }
</style>

<a title=\"my title\" href=\"#\">
    <span class=\"valign-helper\"></span>
    <img src=\"image-path\" />
</a>

June 17, 2014 Filed in: CSS




Related Posts


Fixed Position Div Isn't Staying Fixed When Scrolling on Android

My nice fixed position toolbar wasn't sticking as it should as I scrolled through on my mobile browser window...
Read Post

Simple Sticky Element

The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Read Post

Chrome displays a different height than what Chrome says the height should be.

I was changing the height of an element, but no matter where I specified the height, it wasn't displaying what I was putting in
Read Post

A Nicer Select Dropdown

Better select boxes are all over the internet, but I actually couldn't find one that I liked, and that worked for what I needed...
Read Post

Related Writings

Fixed Position Div Isn't Staying Fixed When Scrolling on Android Simple Sticky Element Chrome displays a different height than what Chrome says the height should be. A Nicer Select Dropdown My Emerging CSS System Why Isn't My SVG Image the Right Size in Internet Explorer Change Placeholder Text Color Debugging Firefox Mobile on Your Computer Fixing Jagged Rendering on CSS Shapes and Arrows in Firefox Fixed position div isn\'t staying fixed in Chrome SASS Quick Guide Equal CSS Tiles and Columns Targeting the Submit Button with CSS Setting up SASS with Ruby and Compass on Your Computer why is 100% width body or div wider than the screen on mobile? An updated 2 Column (Fluid Fixed) Layout Including Border and Padding In Box Dimensions Three Column List A SASS Stylesheet For Great Forms Fixed Column on Left, Fluid Column on the Right Fixed Column on Right, Fluid Column on the Left Centering Multiple Floated Elements Vertical Aligning Within a Div CSS Drop Shadows CSS Rounded Corners Top Margin Stolen From Child Element And Added to Parent (Margin Collapsing)

drempd | san diego, ca


home portfolio blog resume