将图像与中间的文本对齐（响应式）答案

【问题标题】：align image with text in the middle (responsive)将图像与中间的文本对齐（响应式）
【发布时间】：2019-05-07 19:32:29
【问题描述】：

美好的一天，我正在尝试将两个 col-md-6 居中，其中带有文本的左侧与图像旁边的中心对齐。这是我的CSS：

.full_width {
  width: 100% !important;
}

.align-row {
  display:flex !important;
}

.align-row > *
{
  align-self:end !important;
}

我尝试将其与 align-row 对齐，但文本位于底部，任何帮助将不胜感激。

<div class="full_width">
        <div class="align-row row align-items-center">

            <div class="col-md-6 text-align-center">

              <span>
                <h2 class="color-mwc-blue">SELF-CARE IS SELF-LOVE: 2019 WELLNESS GOALS</h2><br>
                <h2 class="color-mwc-orange">REGISTER</h2><br>
                <h2 class="color-mwc-blue">TO ENJOY A WELTH OF DEALS FOR WELLNESS</h2>

              </span>
            </div>

            <div class="col-md-6">
              <img src="img/_stock_replace_this_1.jpg" class="img-responsive">
            </div>

        </div>
      </div>

PS，我正在使用引导程序 4

【问题讨论】：

你在使用 bootstrap 4 吗？
是的，我正在使用 bootstrap 4
检查答案。希望它会工作

标签： html css twitter-bootstrap

【解决方案1】：

使用align-self:center; 对齐中心元素

.align-row > *
{
  align-self:center;
}

.full_width {
  width: 100%;
}

h2{
    font-size:16px;
}

.align-row {
  display:flex;
}

.align-row > *
{
  align-self:center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="full_width">
        <div class="align-row row align-items-center">

            <div class="col-md-6 text-align-center">

              <span>
                <h2 class="color-mwc-blue">SELF-CARE IS SELF-LOVE: 2019 WELLNESS GOALS</h2><br>
                <h2 class="color-mwc-orange">REGISTER</h2><br>
                <h2 class="color-mwc-blue">TO ENJOY A WELTH OF DEALS FOR WELLNESS</h2>

              </span>
            </div>

            <div class="col-md-6">
              <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="img-responsive">
            </div>

        </div>
      </div>

【讨论】：

【解决方案2】：

只需使用d-flex 和align-self-center boostrap 默认类即可将内容居中对齐。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
 <div class="row">
    <div class="col-md-6 col-sm-6 d-flex">
        <div class="align-self-center">
            <h2 class="color-mwc-blue">SELF-CARE IS SELF-LOVE: 2019 WELLNESS GOALS</h2>
            <br>
            <h2 class="color-mwc-orange">REGISTER</h2>
            <br>
            <h2 class="color-mwc-blue">TO ENJOY A WELTH OF DEALS FOR WELLNESS</h2>
        </div>
    </div>
    <div class="col-md-6 col-sm-6">
        <img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
    </div>
 </div>
</div>

【讨论】：