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

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示例 - 请查看下面的更好方法.

基本上,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-cellSame HTML的更好方法..

jsFiddle示例 - 半响应...其他jsFiddle示例 - 响应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例子

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;
}
}