Ensure that text and images are perfectly aligned along a single vertical line

I have the following code snippet using 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 have this layout as shown in the image below:

https://i.sstatic.net/Ori76.png

In this layout, the images are centered while the text is left aligned. How can I make the text align vertically with the images?

csstwitter-bootstrapbootstrap-4responsive-design

Answer №1

Give this a try! Feel free to adjust classes and styles as needed for your website:

<div class="wrapper" 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://example.com/image.jpg">
  <div class="text-container" style="position:relative; height:100%; text-align: center; display:flex; justify-content: center; align-items: flex-start; width: 100%;">
    <p class="centered-text" style="display: block; color: #333;">Centered text below the image</p>
  </div>
  <div class="text-container" style="position:relative; height:100%; text-align: center; display:flex; justify-content: center; align-items: flex-start; width: 100%;">
    <p class="centered-text" style="display: block; color: #333;">Centered text below another image</p>
  </div>
</div>

It might require some adjustments to fit seamlessly into your existing code, but I've tailored it to better suit your needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the size, position, and dimensions of image and text divs as the browser window is resized

I am struggling to find a solution to what seems like a common question but unfortunately haven't been able to locate an answer on Google. Any assistance would be greatly appreciated. My website features a full-size resizable background image using t ...

javascriptjquerycsshtml

Using Custom .woff Format Fonts in Sendgrid: A Guide

Having trouble with implementing custom fonts in Sendgrid. While Google fonts work fine, the custom .woff format font doesn't seem to cooperate. I've attempted three solutions below. Solution number 1 shows up in the Preview tab but not in the em ...

htmlcsssendgrid

Tips for automatically hiding a button when the ion-content is being scrolled and displaying it again once scrolling has stopped

I have implemented a scroll function event in my HTML file using the following code: <ion-content (ionScroll)="scrollFunction($event)"> <ion-card *ngFor="let product of products" no-padding> <ion-item class="bigclass"> <i ...

htmlcssionic-frameworkionic3scrollview

Angular-Bootstrap paginated navigation

When attempting to implement pagination using Bootstrap pager in my AngularJS code, I encountered an issue where the Next button always appeared disabled. Strangely, when running the same code with static data, it worked perfectly fine. The controller fe ...

angularjstwitter-bootstrappagination

What is the best way to position two divs side by side in a way that maximizes the available space?

I am facing an issue with two divs in my HTML code. The right one is set to 80px wide while the other should fill up the remaining space. I have tried various CSS configurations but it seems that the right box always ends up below the left box instead of b ...

csscss-float

NewbieCoder is requesting clarification on the JQUERY smoothscrolling code, can anyone assist?

Can anyone provide an explanation of the functionality of the following JavaScript code? Specifically, I would like a breakdown of each line in this smooth scrolling API. $('a').click(function(){ //upon 'a' click, execute th ...

javascriptjqueryhtmlcssfrontend

How can I retrieve the duration of a video using the YouTube Data API?

Essentially, I am attempting to extract the video duration for each video that appears in the search results. Feel free to play around with the demo I have prepared! Additionally, when I refer to duration, I am talking about the length of the video in M/S ...

jqueryhtmlcssyoutubeyoutube-data-api

Printing Strings in JavaScript IF Conditional Block

Hello there! I am looking for assistance with a JavaScript concept. Recently, I created some code where in the HTML file, there is a div element with an id of "GetID" where the string outputs are meant to be displayed. The JavaScript code looks something ...

javascripthtmlcss

IE11 Floating Placeholder Label Bug Issue (placeholder-shown problem?)

While developing a login page, I encountered an issue where the label above a text input field did not float properly once text was entered in most browsers, specifically Internet Explorer 11. I believe this problem is related to IE's compatibility w ...

htmlcssbootstrap-4material-designfloating

The navigation elements in the Flexbox are behaving strangely as they overflow in an unexpected way

During my responsiveness testing, I came across a very strange issue. I have code that aligns the header as a flexbox, but when I resize the window to over 900px in width, the navbar moves out of the header and appears on top of the next element. Here&apo ...

htmlcssflexboxmedia-queries

The font weight appears too heavy on mobile devices

The condensed font I'm currently using, mango grotesque (variable), displays properly on desktop and in the responsive viewer. However, when I access the site on mobile devices, it seems that the font-weight appears too bold and not responsive. The is ...

htmlcssfontsvariable-fonts

Tips for closing a sidecart by clicking outside of it

I am currently exploring how to implement the functionality of closing my sidecart when I click outside of it. Below is the script I am using: const toggler = document.getElementById('menu-toggle'); const cartWrapper = document.getElementById( ...

javascripthtmlcssbootstrap-4e-commerce

Browser reports that the value "content" for flex-basis is not valid

Provided: .layout { display: flex; flex-wrap: nowrap; align-items: stretch; } .layout aside, .layout main { min-width: 100px; } .layout aside { flex: 0 0 content; background-color: red; } .layout main { flex: 1 1 content; background-c ...

htmlcssflexbox

Adjusting the text size within the graphdracula library

I recently implemented a cool feature in my asp.net mvc4 application by adding a treeview using the graphdracula jQuery library. Here is a snippet of the code I used: <html> <head> <script type="text/javascript" src="~/Content/Scripts ...

jqueryasp.net.netcssasp.net-mvc-4

Reposition the navbar nav to the top right corner of my website using Boostrap

I'm completely new to this subject. Currently, I've been following an online tutorial on HTML/CSS/Bootstrap. One thing I want to do is move the navbar to the top right of the page, like what you see in the image below. I manually added a mockup ...

htmlcssbootstrap-4layoutfrontend

Using React components to activate a click effect on the parent component

I have a React component called Card that has an onclick function triggered when the card is pressed. However, within this component, there are child elements such as sliders and buttons that perform their own actions. When clicking on these child elements ...

cssreactjs

"Divs are now linked and drag as one cohesive unit instead of

As I was experimenting with making images draggable and resizable, I encountered a small issue. When I attempted to drag two or more images, they would merge into one large draggable object instead of remaining separate. My goal was to make each image drag ...

javascriptjqueryhtmlcssjquery-ui

Class for Eliminating the Background Image Using Bootstrap

Is there a Bootstrap class that can be used to remove a background image from a div? Currently, I have this style defined in my CSS: background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0)); I would like to remove it using: bg-img-non ...

javascripthtmlcsstypescriptbootstrap-4

The content is overflowing outside the boundaries of the div, yet there is no

I am currently utilizing jQuery to dynamically load the content of a text file into a div element. However, when the content exceeds the dimensions of the div, no scroll bar is displayed. Here is the HTML structure: <!DOCTYPE html> <html lang=" ...

javascriptjqueryhtmlcss

The functionality of Bootstrap Scrollspy seems to be malfunctioning as it fails to navigate or scroll through the content

I've been struggling to get ScrollSpy up and running. I have a fixed menu on the left side that sticks as the user scrolls down, but for some reason, ScrollSpy just won't cooperate. I've tried numerous methods to make it work, even with the ...

javascriptjqueryhtmlcsstwitter-bootstrap