html - 垂直对齐 float 图像右侧的文本，图像大小可变，响应式

Question

我想将多行文本垂直对齐到左浮动图像的右侧。

但是

• 图像大小(高度和宽度)会有所不同，并且事先未知
• 文本的长度也各不相同，通常会包含多行
• 解决方案需要响应迅速以适应不同的屏幕尺寸
• 解决方案不应涉及图像、d​​iv 或其他任何内容的特定 px 宽度或高度尺寸
  • 我不想使用表格，因为在某些情况下，当图片旁边没有足够的空间容纳文本时，文本需要放在图片下方

我回顾了之前的问题，但没有什么与我正在寻找的完全匹配。它需要在任何设备上工作，所以我不能对任何维度使用绝对 px 值。

我应该如何设置以下样式来实现这一点？

<img src="image.jpg" >

<p>Here is the text that should go to the right of the image</p>

感谢您的帮助。

Answer 1

这将帮助您入门:jsFiddle example - 在下面寻找更好的方法。

基本上，vertical-align:middle 和 display:inline-block 用于 p 和 img 用于居中的元素。

HTML

<div class="element">
    <img src="http://placehold.it/150x150"/>
    <p>Lorem Ipsum is simply dummy text </p>
</div>

CSS

.element {
    background:rgb(134, 226, 255);
    margin:10px;
}
p {
    display:inline-block;
    margin:0px;
    width:70%;
    background:white;
    vertical-align:middle;
}
img {
    display:inline-block;
    vertical-align:middle;
}

---

这是使用 display:table/display:table-cell 相同 HTML 的更好方法..

jsFiddle example - 半响应... Other jsFiddle example - 响应式 img 元素..

CSS

.element {
    width:100%;
    display:table;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
}
p {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    background:white;
}
img {
    display:table-cell;
    width:100%;
    height:auto;
}

---

另一个使用媒体查询的更新

您显然可以使用任何您想要的断点。我使用 480px，因为这只是为了举例。尝试调整窗口大小。 jsFiddle example

CSS

@media only screen and (min-width: 480px) {
.element {
    width:100%;
    display:table;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
p {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    background:white;
}
img {
    display:table-cell;
    width:100%;
    height:auto;
}
}
@media only screen and (max-width: 479px) {
.element {
    width:100%;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
p {
    background:white;
}
img {
    width:50%;
    margin:0px auto;
    display:block;
    height:auto;
}
}