Question

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

然而

图像尺寸（高度和宽度）会有所不同，事先未知
文字长度也各不相同，通常包含多行
解决方案需要响应以适应不同的屏幕尺寸
解决方案不应涉及图像，div或其他任何内容的特定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;
}
}

垂直对齐浮动图像的文本，图像大小变化，响应

1 个答案: