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

其他任何文本都隐藏在第三个块中。

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

Answer 2

#storiesblock {
display:inline-block;
  padding-right:5px;
}
#storiesblock2 {
  width: 300px;
  display:inline-block;
  overflow-y:scroll;
  max-height:64px;
}

<div id="storiesblock"><a href="#"><img src="http://dummyimage.com/92x64/000000/fff"></div><div id="storiesblock2">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></p>

希望这会有所帮助.. :)

Answer 3

你可以使用flexbox来做，但你说你无法使用它，所以我使用float和lineheight属性做了一个解决方案。它有点乱，不幸的是要求你为两个类别设置不同的行高，这可能很烦人。我在这里画了一支笔：

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

HTML

    <div id="storiesblock" class="cf">
  <div class="left-image">
    <img src="http://dummyimage.com/92x64/000000/fff" >  
  </div>
  <div class="right-text">
    <p><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></p>
  </div>
</div>
<div id="storiesblock" class="cf">
  <div class="left-image">
    <img src="http://dummyimage.com/92x64/000000/fff" >  
  </div>
  <div class="right-text long">
    <p><a href="#">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></p>
  </div>
</div>

CSS

  #storiesblock {
  width: 600px;
}

.left-image {
  float:left;
}

.right-text {
  float:left;
  height:64px;
  margin:0;
  width:508px;
  line-height:64px;
  overflow:hidden;
}

.right-text.long {
  line-height:22px;
}

p {
  margin:0;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

你不能使用填充来实现它，因为它会导致隐藏溢出而不应用，并且margin将推动整个块。

我希望这会对您有所帮助，如果您有任何更具体的问题，请与我们联系。

将内容与图像对齐

3 个答案: