如何垂直对齐文本和 4 个图像？

Question

我正在尝试构建一个页面，该页面包含一段文本，其中 4 个图像直接位于其右侧。问题是我之前尝试过使用浮点数，但正如预期的那样，这不起作用，到目前为止我有这个......http://www.franhaines.co.uk/paddlethewye/

代码：

#panel1 {
	padding: 5%;
	width: 100%;
	background-color: #16818a;
}

#intro-text {
	background-color: #16818a;
	width: 50%;
}

div#quad {
    background-color: #111; font-size: 0;
    width: 50%; margin: 0 auto;
}

div#quad figure {
    margin: 0; width: 50%; height: auto;
    transition: 1s; display: inline-block;
    position: relative;
}

div#quad figure img { 
    width: 100%; 
    height: auto; 
}

div#quad figure:nth-child(1) { 
    transform-origin: top left; 
}

div#quad figure:nth-child(2) { 
    transform-origin: top right; 
}

div#quad figure:nth-child(3) {
	 transform-origin: bottom left; 
}
	 
div#quad figure:nth-child(4) { 
    transform-origin: bottom right;
}

.expanded { 
    transform: scale(2); 
    z-index: 5; 
}

div.full figure:not(.expanded) { 
    pointer-events: none; 
}

div#quad figure:hover { 
    cursor: pointer; 
    z-index: 4; 
}

<section id="panel1">
<div id='intro-text'>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui enim.</h3>
</div>

<div id="quad">
<figure>
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/courses.jpg" alt="courses" width="1000" height="700" class="alignnone size-full wp-image-31" />
</figure>
<figure>
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/rental.jpg" alt="rental" width="1000" height="700" class="alignnone size-full wp-image-32" />
</figure>
<figure>
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/tour.jpg" alt="tour" width="1000" height="700" class="alignnone size-full wp-image-33" />
</figure>
<figure>
<img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/where.jpg" alt="where" width="2592" height="1944" class="alignnone size-full wp-image-34" />
</figure>
</div>
</section>

任何帮助将不胜感激，干杯！

Answer 1

您可以使用 display:table 和 table-cell 来布局包装 div 并浮动图像。

#panel1 {
  display: table;
  width: 100%;
  table-layout:fixed; /* split columns equally */
}
#intro-text {
  display: table-cell;
  vertical-align: middle;
}
#quad {
  display: table-cell;
  vertical-align: middle;
}
#quad img {
  display: block;
  width: 50%;
  height: auto;
  float: left;
}

<section id="panel1">
  <div id='intro-text'>

    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui enim.</h3>

  </div>
  <div id="quad">
    <figure>
      <img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/courses.jpg" alt="courses" class="alignnone size-full wp-image-31" />
    </figure>
    <figure>
      <img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/rental.jpg" alt="rental" class="alignnone size-full wp-image-32" />
    </figure>
    <figure>
      <img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/tour.jpg" alt="tour" class="alignnone size-full wp-image-33" />
    </figure>
    <figure>
      <img src="http://www.franhaines.co.uk/paddlethewye/wp-content/uploads/2015/02/where.jpg" alt="where" class="alignnone size-full wp-image-34" />
    </figure>
  </div>
</section>

理想情况下，图像应该是相同大小的。

Answer 2

http://jsfiddle.net/fncjqonn/1/。向左浮动 #intro-text 和 div#squad。然后width: 50%;在div#squad figure

#panel1 {
    padding: 5%;
    width: 100%;
    background-color: #16818a;
    overflow: hidden;
}
#intro-text {
    background-color: #16818a;
    width: 50%;
    float: left;
}
div#quad {
    background-color: #111;
    font-size: 0;
    width: 50%;
    margin: 0 auto;
    float: left;
}
div#quad figure {
    margin: 0;
    width: 50%;
    height: auto;
    transition: 1s;
    display: inline-block;
    position: relative;
}