CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4responsive-design
John John
John John

Reputation: 1

Align text and images on the same vertical line

I have the following markup which uses 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>

Currently i got this layout:-

enter image description here

where the images are centered while the text is left aligned, so how i can force the text to have the same vertical alignment as the images?

Upvotes: 0

Views: 50

Answers (1)

R. Srour
R. Srour

Reputation: 160

Try this, but edit classes or whatever to make it work on your site: 

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

Difficult to understand how this would work in your code as I don't have the complete code, but I edited my answer to better suit your request.

Upvotes: 1

Related Questions