Eddins, yep your example.

 
Seifts: Inherited: no. thanks.

Pompilio: I have a div style=”height: 100px;img style=”height: 50px;/div. How can I get the img to align in the vertical middle, so that there are 25 pixels of space above and below it? I tried “vertical-align:middle;” on both the div and the img but it doesn’t work.

Cosmo: Skcin7: image of what

Lynn: Reisio it’s a company logo

Doleman: It’s not actually 50 pixels I just said that to make it easier to explain

Stavis: I got it working using margin-top: auto; and margin-bottom: auto;, but is that the ideal way to do it? Seems weird that vertical-align: middle isn’t working.

Agramonte: It’s hosted locally. I guess i could put it on codepen or JSfiddle

Glassing: For logos that amount to wordmarks

Bergstedt: I’d just use a background image and replacement text

Gaucin: Backgrounds are easy to center

Beggs: Otherwise you could do line-height: 100px, probably

Bollozos: Reisio Here’s what it is https://jsfiddle.net/q2of2x2s/

Nigh: Yeah that logo, to me, is something I would be fine just showing up as plain text without CSS

Bemberry: So I’d just use a background image

Delaura: Well I got it vertically centered using margin-top: auto and margin-bottom auto. So weird that you have to use that and that a “vertical-align: middle” , which you’d expect to be the solution, isn’t.

Sweetland: Use an image repalcement method with an H1

Kouba: Skcin7, http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Geisel: Thats how you hide the text, and show an image instead

Panaro: And then just use background-position: 50% 50%;

Kamstra: To center the bg image

Hoey: Didn’t think his ego could get bigger, but look at the size of that image

Ginnery: I guess it’s just an always-mobile layout, which is funny in its own way :p

Baierl: Drej: hitting up any of the film festival?

Aills: They’re like real life except you’re just sitting in a chair

Moudry: I havent even gone to a regular movie theater in like 5 years

Mccormic: Probably says something about your quality of life :

Willardson: Its misleading, i still watch movies, but wait til they get on my tv instead

Smittle: It has potential enough :p

Vess: I think i forgot about that today

Naugle: I like it when I’m so productive I go a little hungry :

Travis: Besides, food tastes better if you’re a little hungry :p

Deliberto: Best get to it, adios!

Tako: Hey guys, i did a grid inside a canvas on top of an image

Sutt: But i think i just lost a hour

Sandholm: The canvas doesn’t resize, i need to clear and redraw every time

Wilcock: Probably did, most hours are lost

Land: Is there an easy way to have an image centered and have the excess length to extend out the left and right side of the browser window?

Huppe: Do you think that may be a div with 25 horizontal lines and 25 vertical lines all absolute positioned would be better and faster?

Eddins: Nattyrice: background-size: cover; will do that nicely

Honie: Eddins, would I have to set the image as a background property of a div instead of an image element?

Eddins: That’s how that works. If you’re using an img, you can check out ‘object-fit’ which will do something similar

Zebley: Eddins, it seems like in order for object-fit to work i need to know the width and height of the image ahead of time

Druck: I’ll keep reading about it

Eddins: Nattyrice: http://codepen.io/Eddins/pen/pjjrWx a simple example

Watral: Eddins, yep your example does exactly what I want but for some reason I can’t get it to work on my page