在浮动 div 附近垂直对齐文本答案

【问题标题】：vertical align text near a floating div在浮动 div 附近垂直对齐文本
【发布时间】：2012-10-22 13:12:19
【问题描述】：

就像在标题中一样，我不能在带有 CSS 的 div 附近放置一些垂直居中的文本，我在 google 和 stackoverflow 上进行了搜索，所以我决定在这里提出一个问题。

这是我需要使用 Paint 完成的示例：

我尝试了显示表格单元格和框的解决方案，但它只能在没有左上角浮动 div 的情况下工作。

当文本比蓝色 div 长时，它应该放在 div 下方，就像带有浮动 div 的普通文本一样。

我正在寻找一个唯一的 CSS 解决方案，它是否可以完成？

【问题讨论】：

标签： css html text vertical-alignment floating

【解决方案1】：

仅使用 css 是不可能的。（我很高兴被证明是错误的。）

【讨论】：

【解决方案2】：

我不完全确定这是否可行，但这是我最好的尝试，至少适用于前 2 个示例。

<div class="wrap">
    <div class="invisible"></div>
    <img src="http://placehold.it/140x100">
    <p>Lorem ipsum.</p>
</div>

<div class="wrap">
    <div class="invisible"></div>
    <img src="http://placehold.it/140x100">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, nibh in molestie sodales, risus turpis vehicula tellus, vitae lobortis ligula tortor in enim.</p>
</div>

<div class="wrap">
    <div class="invisible"></div>
    <img src="http://placehold.it/140x100">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra, nibh in molestie sodales, risus turpis vehicula tellus, vitae lobortis ligula tortor in enim. Proin venenatis arcu id enim rutrum eget condimentum urna venenatis. Suspendisse at tortor nisi, in tempus ligula. Maecenas nisl felis, bibendum ut luctus nec, bibendum sit amet erat.</p>
</div>

CSS：

.wrap {
    width:500px;
    border:1px solid red;
    margin:10px;
}
.wrap:before {
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
    margin-left:-0.25em; /* adjusts spacing */
}
p {
    display:inline-block;
    vertical-align:middle;
    width:350px;
}
img {
    float:left;
}

.invisible {
    height:100px;
    display:inline-block;
    vertical-align:middle;
}

fiddle.

【讨论】：

还不错，文本不会出现在图像下方，因为它不在
中，但与浮动元素保持居中是很好的。这将是一种让浮动元素留在文本内的技巧。啊，蓝色的矩形每次都可以有不同的大小，我忘了在问题中指定它。
是的，很遗憾，您需要根据图像的大小更改.invisible div 的高度/宽度。我认为毕竟可以使用更多嵌套的 div 来做到这一点，这些 div 非常小心地浮动和居中；但我会把它留给你去试验。
我知道，我指定了不同大小的蓝色矩形以避免一些解决方案。顺便说一句，在我只尝试表格单元格和框之前，您的回答对我做一些内联块实验很有用。

【解决方案3】：

这可以通过纯 CSS 实现。

body {
  background: url("http://img08.deviantart.net/b5aa/i/2015/140/7/c/chalkboard_by_lorelinde-d8u2phm.jpg") no-repeat;
}

.container {
  color: rgba(255, 255, 255, .9);
  font-family: "Chalkduster", "Baskerville";
  font-size: 18px;
  padding: 0 10px;
  width: 550px;
}

#user_portrait {
  border-radius: 13px;
  border: 3px solid rgba(255, 255, 255, .9);
  float: left;
  margin: 0 20px 0 0;
  max-height: 300px;
  max-width: 300px;
  filter: sepia(50%);
}

#overview_text {
  letter-spacing: 1px;
  line-height: 1.3rem;
  padding: 0 0 0 10px;
  white-space: pre-line;
}

<body>
  <p class="container">
    <img id="user_portrait" src="https://pbs.twimg.com/profile_images/704337993293815810/PmkKs6yw.jpg">
    <span id="overview_text">“Never hate your enemies. It affects your judgment.”
    
    “My father held a gun to his head, and my father assured the bandleader that either his signature or his brains would be on the contract.”
    
    “There are many things my father taught me here in this room. He taught me: keep your friends close, but your enemies closer.”
    </span>
  </p>
</body>

关键是将图片和文字都放入非内联父标签中，并使其浮动。

【讨论】：