Выровняйте текст и изображения на одной вертикальной линии - PullRequest
Новая
       97

Выровняйте текст и изображения на одной вертикальной линии

0 голосов
/ 17 июня 2020

У меня есть следующая разметка, в которой используется 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>

В настоящее время у меня есть этот макет: -

enter image description here

, где изображения центрируются, а текст выровнен по левому краю, так как я могу заставить текст иметь такое же вертикальное выравнивание, что и изображения?

1 Ответ

1 голос
/ 17 июня 2020

Попробуйте это, но отредактируйте классы или что-то еще, чтобы заставить его работать на вашем сайте: 

<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>

Трудно понять, как это будет работать в вашем коде, поскольку у меня нет полного кода, но я отредактировал свой ответ, чтобы он лучше соответствовал вашему запросу.

...