垂直对齐浮动图像的文本权限，图像大小变化，响应 [英] Vertically align text right of floated image, image sizes varied, responsive

问题描述

我想在左侧浮动图片的右侧垂直对齐多行文字。

但

• 图片尺寸（高度和宽度）


• 文字的长度也不一样，通常包含多行


• 解决方案需要响应以适应不同的屏幕尺寸
• 
  
• 解决方案不应涉及图像，div或其他任何特定的px宽度或高度尺寸
  
  
  
  • 我不想使用表作为
  
  
  
  $ b

$ b

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

我应该如何风格下面的实现呢？

 < img src =image.jpg> 
 
< p>下面是应该显示在图片右侧的文字< / p>感谢您的帮助。
解决方案
这将让你开始：  jsFiddle示例   -   
 
 
 
基本上， vertical-align：middle   p 和 img  display：inline-block  > 
 
 < div class =element> 
< img src =http://placehold.it/150x150/> 
< p> Lorem Ipsum只是虚拟文字< / 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示例   - 半回应... 其他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; 
} 
} 
  
 
I'd like to vertically align multiple lines of text to the right of a left-floated image. 

However 


The image size (height and width) will vary and is unknown in advance
The length of text varies also and will usually comprise multiple lines
Solution needs to be responsive to adapt to varied screen sizes
Solutions should not involve specific px width or height dimensions for images, divs or anything else 

I don't want to use tables as the text will need to drop underneath the image in certain scenarios when there isn't enough room for the text beside the image



I've looked back through previous questions but nothing quite matches what I am looking for. It needs to work on any device so I can't use absolute px values for any dimension.

How should I style the following to achieve that?
<img src="image.jpg" >

<p>Here is the text that should go to the right of the image</p>
Thanks for any help.
解决方案
This will get you started: jsFiddle example - look below for a better method.

Basically, vertical-align:middle and display:inline-block are used on both the p and the img elements for centering.

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




Here is better approach using display:table/display:table-cell Same HTML..

jsFiddle example - semi-responsive... Other jsFiddle example - responsive img elements.. 

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




Yet another update using media queries

You could obviously use whatever breakpoints you want. I use 480px, as this is just for example purposes. Try resizing the window. 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;
}
}


                        
这篇关于垂直对齐浮动图像的文本权限，图像大小变化，响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！