How do I place an image centered in a DIV and text to the right? Overflow problems

Question

I have a div container where I want to put in a centered image and a small description to the right. The specifications are:

1. The image should have a bottom margin of 35px.
2. The image should always show fully on the screen, so it resizes when the screen does. It should have the biggest size possible, but never be cropped and never use scrollbars.
3. The image should be centered with respect to the container, with the text showing on the right margin.
4. The text should be left-aligned horizontally, center-aligned vertically and have a 30px separation from the image.

I've tried using a table in the container and using div s, but I can't find a clean solution. I can show you the non-working code I've tried on request.

Answer 1

This one was a tricky one. The actual tags used don't really matter, just the number of elements and how they are nested.

The vertical centering of the text is done via Flexbox, which has limited support (Chrome, IE10, Opera, Safari, most mobile browsers). Firefox (with 2009 Flexbox properties) would normally be lumped in here, but it has a bug that prevents Flexbox from working if it is applied to an absolutely positioned element.

http://cssdeck.com/labs/iu0gx2wk

Markup:

<div class="gallery">
  <article>
    <h1>My image title</h1>
    <img src="http://placekitten.com/640/480" alt="A really cute kitten" />
  </article>
</div>

CSS:

.gallery {
  padding: 0 230px;
  text-align: center;
}

article {
  display: inline-block;
  max-width: 100%;
  position: relative;
}

img {
  max-width: 100%;
  vertical-align: text-bottom;
}

h1 {
  position: absolute;
  text-align: left;
  right: -230px;
  top: 0;
  bottom: 0;
  width: 200px;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

Alternately, you could add one extra element and use the table/table-cell display properties to get your vertical centering.

http://cssdeck.com/labs/lqgjgghw

Markup

<div class="gallery">
  <article>
    <h1><span>My image title</span></h1>
    <img src="http://placekitten.com/640/480" alt="A really cute kitten" />
  </article>
</div>

CSS

.gallery {
  padding: 0 230px;
  text-align: center;
}

article {
  display: inline-block;
  max-width: 100%;
  position: relative;
}

img {
  max-width: 100%;
  vertical-align: text-bottom;
}

h1 {
  position: absolute;
  text-align: left;
  right: -230px;
  top: 0;
  bottom: 0;
  width: 200px;
  margin: 0;
  display: table;
}

h1 span {
  display: table-cell;
  vertical-align: middle;
}

* note that the demos have their padding/positioning off by a little bit, the code listed here is correct.