在同一垂直线上对齐文本和图像

Question

我有以下使用 bootstrap 4 的标记：-

<div class="container">
    <div class="row ">
        <div class="col-xl-12">
            <img src="~/img/img1.png" style="height:60.3px;width:750px" class="mx-auto d-none d-sm-block" />
            <p  style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
            <p  style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>

            <img src="~/img/img2.png" class="mx-auto d-block" />

            <p  style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
            <p  style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>


        </div>

    </div>

</div>

目前我得到了这个布局：-

文本左对齐时图像居中的位置，那么我如何强制文本与图像具有相同的垂直对齐方式？

Answer 1

试试这个，但编辑类或其他任何东西以使其在您的网站上运行：

<div class="container" style="position:relative; display:inline-block;">
  <img class="mx-auto d-none d-sm-block" style="display:block; height:60.3px;width:750px" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/close-up-of-tulips-blooming-in-field-royalty-free-image-1584131603.jpg">
  <div class="text-box" style="position:relative; height:100%; text-align: center; display:flex; justify-content: center; align-items: flex-start; width: 100%;">
    <p class="centeredTxt" style="display: block; color: #333;">Text is centered under image</p>
  </div>
  <div class="text-box" style="position:relative; height:100%; text-align: center; display:flex; justify-content: center; align-items: flex-start; width: 100%;">
    <p class="centeredTxt" style="display: block; color: #333;">Text is centered under image 2</p>
  </div>
</div>

由于我没有完整的代码，因此很难理解这在您的代码中是如何工作的，但我编辑了答案以更好地满足您的要求。