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

Question

我正在尝试构建一个页面，其中包含一个文本段落，其四个图像位于四边形中，直接位于其右侧。问题是我之前尝试使用浮动，但正如预期的那样，这没有用，到目前为止，我有这个... 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＆amp; 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;
}