html - 将内容与图像对齐

Question

我正在尝试将文本垂直居中放置在图像旁边。

同时我不希望文本溢出图像的垂直边界。

挣扎。有什么最佳做法或提示吗？

这是 HTML:

<div id="storiesblock">
  <p><a href="#"><img src="http://dummyimage.com/92x64/000000/fff">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </a>

<p><a href="#"><img src="http://dummyimage.com/92x64/000000/fff">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</a>
</div>

和 CSS:

#storiesblock {
  width: 600px;
}

并且，在 ASCII 艺术中，我想要实现的目标是:

IMAGEIMAGEIMAGE
IMAGEIMAGEIMAGE Text here...
IMAGEIMAGEIMAGE

IMAGEIMAGEIMAGE Lorem Ipsum has been the industry's standard dummy text
IMAGEIMAGEIMAGE Lorem Ipsum has been the industry's standard dummy text
IMAGEIMAGEIMAGE Lorem Ipsum has been the industry's standard dummy text

第三 block 中隐藏了任何其他文本。

http://codepen.io/anon/pen/gpWJGx

Answer 1

试试这个:

HTML:

<div id="storiesblock">
  <a href="#" class="story">
    <img class="story-image" src="http://dummyimage.com/92x64/000000/fff">
    <div class="copy">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </a>
  <a href="#" class="story">
    <img class="story-image" src="http://dummyimage.com/92x64/000000/fff">
    <div class="copy">
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </a>

</div>

CSS:

#storiesblock {
  width: 600px;
}

.story {
  display: flex;
  margin-bottom: 20px;
}

.copy {
  align-self: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.story-image {
  width: 92px;
  height: 64px;
  flex-shrink: 0;
  margin-right: 20px;
}

http://codepen.io/RyanWarner/pen/yNbWPZ