Vertical text alignment alongside an image in multiple lines

I have been struggling with aligning multi-line text next to an image in a responsive design. No matter what I try, when the browser window is resized and the text becomes multi-lined, it always falls below the image positioned to the left of it. Can anyone provide guidance on how to keep the resulting multi-line text vertically aligned next to the image? While there are plenty of solutions available for single line text next to an image, I haven't come across any for multi-line text alignment.

<div id="printnotice" style="float:left;margin-top:5px;margin-bottom:10px;width:95%;text-align:center;">
    <div style="float:left;margin:auto;display:block;">     
        <img style="align:left;vertical-align:middle;" alt="STOP" src="/Portal Content/Home/Stop">
        <span style="margin-left:20px;font-family:Calibri;font-size:1.5em;">Required: Print Registration Information and Support Options and give to customer</span>
    </div>

</div>
csshtmltextvertical-alignment

Answer №1

If you want to align the text vertically next to the image on the right, you can achieve this by using display:table; and display:table-cell;

Take a look at this FIDDLE

Here is the HTML code:

<div id="printnotice">
    <div>
        <span><img alt="STOP" src="http://lorempixel.com/output/food-h-g-198-256-8.jpg" /></span>
        <span>Required: Print Registration Information and Support Options and give to customer</span>
    </div>
</div>

This is the CSS section:

#printnotice {
    float:left;
    margin-top:5px;
    margin-bottom:10px;
    width:95%;
    text-align:center;
}
#printnotice div {
    float:left;
    margin:auto;
    display:table;
}
#printnotice span {
    display:table-cell;
    vertical-align:middle;
    margin-left:20px;
    font-family:Calibri;
    font-size:1.5em;
}

Answer №2

Check out the demo

If you want the image to float and ensure that the text doesn't wrap around it, you can use the following CSS:

#printnotice img {
    float: left;
}
#printnotice span {
    overflow: hidden;
    display: block;
}

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

The validation requirement in Angular prevents the form from being considered valid until the input has been modified

I have included the HTML5 required property in the below HTML code: <div class="col-sm-3"> <label>{{question.placeholder}}<span *ngIf="question.required">*</span></label> </div> <d ...

htmlangularangular-forms

Is there a more efficient method for creating HTML with coffeescript / jQuery besides using strings?

Today marks my first attempt at creating a "answer your own question" post, so I hope I am on the right track. The burning question in my mind was, "Is there a more efficient way to generate HTML with jQuery rather than using tag strings?" My goal is to c ...

javascriptjqueryhtmlcoffeescript

Load HTML 5 video on a webpage after all other elements have finished loading

Hello there! I'm trying to figure out a way to load an HTML 5 video after the page has already loaded. Currently, the video pauses all site interaction until it's fully loaded, but I'd prefer to have it display an image first and then autopl ...

jqueryhtmlhtml5-video

The Data from Req.Body Doesn't Appear After Adding Form Fields

I've been struggling to find a solution to this issue, but here's the gist of it: I have a button that allows users to add a question and answer pair one at a time by clicking on an "Add Question" button. This is achieved through the append featu ...

javascripthtmlnode.jsexpress

Struggles encountered when trying to fetch text using a custom xpath or css selector in firebug

Struggling to extract a specific text snippet from a webpage using Selenium. The code I'm dealing with on the page is as follows: <div id="BVRRRatingOverall_Review_Display" class="BVRRRating BVRRRatingNormal BVRRRatingOverall"> <div class="B ...

htmlxpathseleniumcss-selectors

Learn how to implement the JQuery ReplaceWith function with the resources provided by materials.io icon

I would like the favorite_border icon to switch to the favorite icon when clicked. As we are using material.io and both icons have the class material-icons, I am unsure about how to implement this using jQuery. What steps should I take to achieve this? (w ...

javascripthtmljqueryonclick

The mobile functionality of the stylesheet is not functioning properly

Recently, I came across an issue with a stylesheet designed for mobile devices that contains the following code: /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } Surprisingly, this code failed to work ...

cssmedia-type

Tips for replacing the default pointer image

Is there a way to change the default image for cursor: pointer to a custom image without having to create a new class for every element? Creating a class and specifying the hover value for cursor is not an ideal solution as it would require adding the cla ...

htmlcsspointersmouse-cursor

Tips for adjusting an svg component to suit various screen sizes

I inserted the following SVG component into my HTML file. It fits perfectly on my tablet, but it's too large for my smartphone. How can we automatically adjust the size of the SVG to fit different screens? <svg viewBox="310 -25 380 450" w ...

javascripthtmlcssionic3

What could be the reason for the compatibility issues between CSS/SASS modules and a third-party library?

I am puzzled by the fact that my sass modules do not affect the third-party component I am using, specifically react-horizontal-scrolling-menu <ScrollMenu selected={selected} scrollToSelected={true} data={items && items.map((item: any) ...

cssreactjscss-modulesreact-css-modulessass-modules

Incorporating random images into diverse div containers every time

I previously asked this question, but it was too long and not specific enough. So here is a revised version of my query. For fun, I am creating a game based on instructions I found online. The game involves 12 cards with images face down. You click on two ...

jqueryhtml

Learn how to display separate paragraphs upon clicking a specific item

New to coding and eager to learn, I have recently started exploring HTML, CSS, and basic JavaScript. In my journey to enhance my skills, I am working on building a website for practice. One particular page of the site showcases various articles, each acc ...

javascriptjqueryhtml

Tips for efficiently printing invoices on specific paper: Print a maximum of 20 items per sheet, and if it exceeds this limit, continue onto the next page. Ensure the total amount is

$(document).ready(function(){ var j = 23; for (var i = 0; i < j+11; i++) { if (i != 0 && i % 11 == 0) { $("#printSection div").append("<?php echo '<tr><td>fff</td></tr>'; ?>"); ...

javascriptjqueryhtmlcss

CSS - Button with upwards pointing arrow, requiring it to point downwards when hovered over

Struggling with the following issue: I have a button with a downward-pointing arrow in its description. When I hover over the button (or any content within it), I want the arrow to point upwards. However, currently, the arrow only points up when I hover ...

htmlcss

Sequential actions triggered by pressing keys, one by one. (Utilizing Jquery for an RPG-style dialogue box)

I'm currently working on a JQuery project where I need to implement a dialog box for a game. My goal is to display text1 when the enter key is pressed. Upon pressing enter again, text2 should appear, and so on for up to 7 texts. However, I'm f ...

jquerytextdialog

Enable automatic playback of HTML5 video with the sound on

I want to add an autoplay video with sound on my website, but I'm running into issues with newer browsers like Chrome, Mozilla, and Safari blocking autoplay if the video doesn't have a 'muted' attribute. Is there a clever HTML or Javas ...

javascripthtmlvideobrowserautoplay

Creating Log Event Instances from Text Log File

My log file is structured like this: Line 1 - Date and User Information Line 2 - Type of Log Event Line 3-X, variable number of lines with additional information, can be ranging from 1 to hundreds This pattern repeats throughout the log file. ...

pythoneventsloggingtextprocessing

Comparing Ajax HTML with XML/JSON responses: which is better for speed or other considerations

I have a website that heavily relies on ajax, and I insert around 3k html formatted pages into the DOM through ajax requests. My current approach involves inserting the entire html responses using jQuery. However, another option is to output in xml or jso ...

htmlxmlajaxjson

R: Extracting data from web pages: The content appears to be formatted in XML but is not recognized as such; employing HTML

Working on scraping data from multiple years which are represented by different webpages. I have successfully extracted the 2019 data as expected, but encountering an error while attempting to preprocess the 2016 data in a similar manner. url19 <- &apos ...

htmlrxmlweb-scrapinghtml-parsing

Tips for refreshing the 'state' of an Angular Router component

I'm facing an issue with passing data between pages using Angular routing. Everything works as expected when navigating to the "next" page for the first time. However, upon returning to the home page and selecting a different item, the Router's s ...

htmlangulartypescriptionic-framework