时间戳

首页 > 解决方案 > 我们可以在另一个 div 中使用与图像垂直对齐吗

html - 我们可以在另一个 div 中使用与图像垂直对齐吗

问题描述

我尝试在另一个 div 中使用垂直对齐。我知道，如果你想垂直对齐，你必须至少有一个imageand 。但是如果我想在我的和不同的时候使用它呢？有没有办法像这样使用它？spandivimageh4div

这是我的示例代码（我使用引导程序row和col）：

  <div id="paham-quotes" class="card">
    <div class="card-body">
      <div class="row">
        <div class="col quotes-img">
          <img
            src="../assets/dashboard/nelson-mandela.png"
            alt="nelson-mandela"
          />
        </div>

        <div class="col quotes-caption">
          <h4 class="card-title">
            “Education is the most powerful weapon which you can use to change
            the world.”
          </h4>
          <h5 class="card-text">
            Nelson Mandela
          </h5>
          <h5 class="card-text">
            Ex president of south africa
          </h5>
        </div>
      </div>
    </div>
  </div>

这是我的CSS代码：

#paham-quotes{
    font-family: 'Nunito', sans-serif;
    max-width: 1200px;
    margin: 0% auto;
    border: none;
}

#paham-quotes .quotes-img > img{
    text-align: center;
    width: 250px;
    height: auto;
}

#paham-quotes .quotes-caption{
    color: #1D3962;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    padding-right: 100px;
}

#paham-quotes .quotes-caption h4{
    font-size: 1.4em;
    font-style: italic;
}

有人可以帮我解决这个问题吗？我读到的一些主题指向的是div这样的：

图像旁边的垂直对齐文本

图像和文本彼此相邻并且在 div 中间

标签： htmlcss

解决方案

如果您使用的是引导程序 4，则可以通过在行中添加 flex 类来做到这一点::

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

推荐阅读