根据内容更改文本对齐方式

Question

我得到了“标题”，“描述”和按钮。基于以下场景，我想显示内容（给出每个场景的参考链接）

场景1：标题与描述＆amp;两个按钮 “标题”位于顶部，“描述”左对齐标题下方。两个普通的CTA按钮与'description'一致。

场景2：带描述的平铺＆amp;一个按钮 “标题”位于顶部，“描述”左对齐标题下方。一个普通的CTA按钮与'description'一致。

场景3：标题与描述＆amp;没有按钮 “标题”位于顶部，中间对齐描述如下，没有CTA按钮。

场景4：带有一个或两个按钮的标题/无描述 Title和按钮应位于同一行

.text-center {
  text-align: center;
}

.cta {
  display: table;
}

.cta-content,
.cta-title,
.cta-button {
  display: table-cell;
}

<!-- Scenario 1-->
<div class="cta-module row bottom-divider text-center">
  <div class="cta content-wrapper col-12">
    <div class="cta-title">
      <h2>Achieve your goal</h2>
    </div>
    <div class="cta-content">
      <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p>
    </div>
    <div class="cta-button">
      <a href="javascript:void(0)">Find out more</a>
      <a href="javascript:void(0)">Find out more</a>

    </div>
  </div>
</div>

<!-- Scenario 2-->
<div class="cta-module row bottom-divider text-center">
  <div class="cta content-wrapper col-12">
    <div class="cta-title">
      <h2>Achieve your goal</h2>
    </div>
    <div class="cta-content">
      <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p>
    </div>
    <div class="cta-button">
      <a href="javascript:void(0)">Find out more</a>
    </div>
  </div>
</div>


<!-- Scenario 3-->
<div class="cta-module row bottom-divider text-center">
  <div class="cta content-wrapper col-12">
    <div class="cta-title">
      <h2>Achieve your goal</h2>
    </div>
    <div class="cta-content">
      <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p>
    </div>
  </div>
</div>


<!-- Scenario 4-->
<div class="cta-module row bottom-divider text-center">
  <div class="cta content-wrapper col-12">
    <div class="cta-title">
      <h2>Achieve your goal</h2>
    </div>
    <div class="cta-button">
      <a href="javascript:void(0)">Find out more</a>
    </div>
  </div>
</div>

My Above css并不适用于所有场景。除非他们在CSS中没有选项，否则我不想使用javascript或Jquery。请帮忙

Answer 1

我有一个类似于Pete（Test it on jsfiddle）的解决方案，但对于方案4，没有办法只在HTML / CSS中实现它 （如你所愿）。几行JavaScript不应该伤害页面。

（@ Lokesh的解决方案不起作用，因为它的＆＃34; alignLine＆＃34; div没有放在方案4中的相同位置）

＆＃13;

＆＃13;

     .text-center {
  text-align: center;
}

.cta-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

.cta-content {
  display: flex;
  align-items: flex-start;
}

.cta-button {
  display: flex;
  align-items:center;
}

＆＃13;

    <!-- Scenario 1-->
<div class="cta-module row bottom-divider text-center">
  <div class="cta content-wrapper col-12">
    <div class="cta-title">
      <h2>Achieve your goal</h2>
    </div>
    <div class="cta-wrapper">
      <div class="cta-content">
        <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p>
      </div>
      <div class="cta-button">
        <a href="javascript:void(0)">Find out more</a>
      </div>
      <div class="cta-button">
        <a href="javascript:void(0)">Find out more</a>
      </div>
    </div>
  </div>
</div>

<!-- Scenario 2-->
<div class="cta-module row bottom-divider text-center">
  <div class="cta content-wrapper col-12">
    <div class="cta-title">
      <h2>Achieve your goal</h2>
    </div>
    <div class="cta-wrapper">
      <div class="cta-content">
        <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p>
      </div>
      <div class="cta-button">
        <a href="javascript:void(0)">Find out more</a>
      </div>
    </div>
  </div>
</div>


<!-- Scenario 3-->
<div class="cta-module row bottom-divider text-center">
  <div class="cta content-wrapper col-12">
    <div class="cta-title">
      <h2>Achieve your goal</h2>
    </div>
    <div class="cta-wrapper">
      <div class="cta-content">
        <p>Whether it's a new or second-hand car, a personal loan can help you pay for your car if you don't have the funds up front.</p>
      </div>
    </div>
  </div>
</div>


<!-- Scenario 4-->
<div class="cta-module row bottom-divider text-center">
  <div class="cta content-wrapper col-12">
    <div class="cta-title">
      <h2>Achieve your goal</h2>
    </div>
    <div class="cta-wrapper">
      <div class="cta-button">
        <a href="javascript:void(0)">Find out more</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;