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

Question

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

正如在这些图片中看到的，当屏幕足够宽时它很好，但当它减小宽度时文本对齐就会困惑:

这是我的代码:

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

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

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

Answer 1

我想你可以尝试这样的事情。它使用 flex-box:
+ .row-eq-height: 使两个(或更多)列始终具有相同的高度
+ .box-center:即使你没有特定的高度，也非常有助于居中放置

**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>