无论屏幕尺寸如何，都垂直对齐图像右侧

Question

我创建了一个包含两列的Bootstrap行。我想知道如何确保文本始终垂直对齐图像，即使屏幕宽度减小。

正如在这些照片中看到的那样，当屏幕足够宽时它很好但是当它的宽度减小时，文本对齐会混乱：

这是我的代码：

＆＃13;

＆＃13;

.success img {
  float: left;
  clear: left;
  margin: 0% 10% 10% 10%;
  vertical-align: middle;
  height: 20%; 
}

.success h4 {
  margin-bottom: 0%;
  margin-top: 5%;
  height: 20%; 
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-md-6">
    <img src="http://lorempixel.com/100/100/nature" height="20%" width="20%">
    <h4>Education</h4>
    <p>School...</p>
  </div>
  <div class="col-md-6">
    <img src="http://lorempixel.com/100/100/people" height="20%" width="20%">
    <h4>Education</h4>
    <p>School...</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何使文本与其各自的图像垂直对齐？

Answer 1

我想你可以尝试这样的事情。它使用flex-box：
+ .row-eq-height：使两个（或更多）col总是具有相同的高度
+ .box-center：即使你没有特定的高度，也很有帮助。[/ p>

**CSS**
.box-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

**HTML**
<div class="row">
    <div class="col-md-6 row-eq-height">
        <div class="col-md-4 row-eq-height">
            <img src="http://lorempixel.com/100/100/nature">
        </div>
        <div class="col-md-8 box-center">
            <div><h4>Education</h4>
            <p>School...</p></div>
        </div>
    </div>
    <div class="col-md-6 row-eq-height">
        <div class="col-md-4">
            <img src="http://lorempixel.com/100/100/people">
        </div>
        <div class="col-md-8 box-center">
            <div><h4>Education</h4>
            <p>School...</p></div>
        </div>
    </div>
</div>

.box-center {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;
	align-items: center;
}
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="row">
    <div class="col-md-6 row-eq-height">
        <div class="col-md-4 row-eq-height">
            <img src="http://lorempixel.com/100/100/nature">
        </div>
        <div class="col-md-8 box-center">
            <div><h4>Education</h4>
            <p>School...</p></div>
        </div>
    </div>
    <div class="col-md-6 row-eq-height">
        <div class="col-md-4">
            <img src="http://lorempixel.com/100/100/people">
        </div>
        <div class="col-md-8 box-center">
            <div><h4>Education</h4>
            <p>School...</p></div>
        </div>
    </div>
</div>