时间戳

首页 > 解决方案 > 引导列未对齐的文本和图像

html - 引导列未对齐的文本和图像

问题描述

美好的一天，我有这个问题，我的引导行列未对齐，文本在 col-8 下，图像在 col-4 下。但是，即使它们在同一行中，文本和图像也是未对齐的。任何帮助将不胜感激，我有一个针对该问题的 js fiddle 链接。

  1. 代码片段：

          <div class="col-md-8 justify_text">

        <span>

          <h4 class="bold_font color-mwc-orange">WHO WE ARE</h4>
          <br>
          <h4 class="color-mwc-blue text-height-wide2">My White Card is an innovative collaboration of the recent revolutionary healthcare approach; The first of its kind beauty, health, and wellness membership that offers an array of the best discount coupons and unlimited services in pursuit of a convenient access through a Mobile App technology. </h4>
          <h4 class="color-mwc-blue text-height-wide2">We offer different discount coupons from aesthetics, cosmetic surgeries, dental services, functional medicine, preventive healthcare and wellness programs from our Exclusive, Premiere and carefully curated clinics and excellent doctors in the Metro.</h4>

        </span>
      </div>

      <div class="col-md-4">
        <br><br><br>
        <img src="img/home_who_we_are.jpg" class="img-responsive spacer center-block">
      </div>
  </div>
</div>

  2. jsfiddle：https ://jsfiddle.net/xp3zqLra/4/

  3. 现在的状况

现在的状况

  1. 预期布局

预期布局

标签： htmlcsstwitter-bootstrap

解决方案

.row {
  display:flex;
}

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

https://jsfiddle.net/xp3zqLra/6/

推荐阅读