垂直对齐两个图像和一些多行文本

Question

我尝试在HTML中创建如下图所示的布局：

我有一张固定的图像，（我知道它的大小），然后我需要放置一些多行文字，然后是另一张可变大小的图像。

所有三个元素应垂直对齐，即所有三个元素的垂直中心应相同。

如果重要，此页面应显示在移动设备上。

我已经检查了stackoverflow上的所有相关问题，并尝试了我看到的所有可能性，但没有运气。

Answer 1

您可以使用显示表并使用它...不确定您是否希望在移动设备上使用相同的布局，但您可以执行以下操作：

<div class="content-wrapper">
   <div class="col four"> 
     <img src="http://lorempixel.com/100/100/" alt="">    
   </div>
   <div class="col four">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
   </div>
   <div class="col four">
      <img src="http://lorempixel.com/200/200/" alt="">
   </div>
</div>

以及以下css：

*{ box-sizing: border-box; }

.content-wrapper{
   display-table;
   max-width:800px;
}

.col{
   display:table-cell;
   vertical-align:middle;
   padding:10px;
}

.four{
 width: 33.33%
}

如果你想在移动设备上使用不同的布局，你应该可以更改显示表格以显示相对值，并将每个col的显示设置为100％。

选中此示例：https://jsfiddle.net/m8zqm4co/10/

Answer 2

你可以做一些稍微复杂的事情：

.three-col {text-align: center; vertical-align: middle; display: table; width: 100%;}
.three-col .running-text {vertical-align: middle; display: table-cell; text-align: center;}
.three-col .running-text p {display: inline-block;}

<div class="three-col">
  <div class="running-text">
    <img src="http://placehold.it/100x100" alt="" class="fixed-img">
  </div>
  <div class="running-text">
    <p>Poda Venna</p>
  </div>
  <div class="running-text">
    <img src="http://placehold.it/200x200" alt="" class="fixed-img">
  </div>
</div>
<div class="three-col">
  <div class="running-text">
    <img src="http://placehold.it/100x100" alt="" class="fixed-img">
  </div>
  <div class="running-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam modi cumque ratione voluptatem sunt voluptatibus veniam esse placeat amet labore cupiditate, mollitia eaque hic earum officia voluptatum et, obcaecati consequuntur.</p>
  </div>
  <div class="running-text">
    <img src="http://placehold.it/200x200" alt="" class="fixed-img">
  </div>
</div>

Answer 3

假设您有一个div，其中图像和文本都在其中。

试试这个：

＆＃13;

＆＃13;

#container {
    	height: 300px;
    	line-height: 300px; /* same size as height */
    	display: inline-block;
    }
    .inner img{	
    	display: inline-block;
    	vertical-align: middle;
    }

＆＃13;

<div id="container">
        <div class="inner">
    	    <img src="http://placehold.it/100x100">
            Example Test
            <img src="http://placehold.it/200x200">
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

HTML, BODY{
height: 100%;
}
.wrap{
border: 1px solid red;
position: relative;
height: 100%;

}
.wrap img:nth-of-type(1), .wrap img:nth-of-type(2), .wrap p{
top: 50%;
 transform: translateY(-50%);
position: relative;
}
.wrap img:nth-of-type(1){
position: absolute;
left: 10px;
}
.wrap img:nth-of-type(2){
display: inline-block;
vertical-align: middle;
width: 30%;
float: right;
}
.wrap p{
float: left;
width: 40%;
margin: 0 10px 0 25%;
text-align: center;
}

<div class="wrap">
<img src="http://lorempixel.com/100/100/nature/" alt="">
   <img src="http://lorempixel.com/200/200/nature/" alt=""> 
<p>0s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially un</p>
</div>