Tips for positioning text beneath an image in a visually appealing way

Looking to align text under a picture, like this:

Previously, I attempted it this way, which was incorrect:

This is my code:

.test{
  display:inline-block;
}
.test img{
  display:block;
}
<span class="test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="503120203c357d243f2533387d39333f3e10627e203e37">[email protected]</a>?v=73d79a89bded&a" alt="asd" width="316" height="316">
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</span>

When running on localhost, only the first line aligns with the image. How can I align all of the text?

htmlcss

Answer №1

Modify your span element by implementing a flex display and setting a specific width.

.test {
  display: flex;
  flex-direction: column;
  width: 300px;
}
.test img {
  display:block;
}
<span class="test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e48594948881c9908b91878cc98d878b8aa4d6ca948a83">[email protected]</a>?v=73d79a89bded&a" alt="asd" width="316" height="316">
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</span>

https://jsfiddle.net/vzjj9eLy/

Answer №2

Not entirely certain if this is what you are looking for, but have you considered making the width of the enclosing span the same as the image?

.test{
  display:inline-block;
  max-width: 316px;
}
.test img{
  display:block;
}
<span class="test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f6e7e7fbf2bae3f8e2f4ffbafef4f8f9d7a5b9e7f9f0">[email protected]</a>?v=73d79a89bded&a" alt="asd" width="316" height="316">
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</span>

Answer №3

.test{
  display:inline-block;
  width:200px;
  text-align: justify;
}
.test img{
  display:block;
  width:200px;
}
<span class="test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="620312120e074f160d17010a4f0b010d0c22504c120c05">[email protected]</a>?v=73d79a89bded&a" alt="asd" height="200">
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</span>

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 Link Breaks the Overlay Hover Effect

Currently, the code functions as intended when you hover over or touch the thumbnail, an overlay will appear. The issue lies in the fact that to navigate to a specific URL, you have to click directly on the text. The overlay itself is not clickable and ca ...

javascripthtmlcsswordpress

By introducing margins, the final column will automatically create a new row

"I'm encountering an issue with my code. I need to add margins between columns in Bootstrap without them wrapping to a new row. Can someone help me prevent this from happening?" <div class="container attributes-div"> <div class="row ...

htmlcssbootstrap-4

What is the best method for dynamically loading CSS using JavaScript?

Due to a certain condition I have, I am unable to load some CSS and JS in my HTML. As a solution, I've decided to dynamically pull them using $.get(). While I have successfully tested pulling and executing js remotely, I am facing some challenges when ...

javascriptjquerycssajaxeval

The jQuery function is not functioning correctly

Currently, I am in the process of setting up an accordion menu using jQuery and CSS3. Everything is working perfectly fine so far except that the menu always opens upon page load and the code to hide it is not functioning as intended. Here's the link ...

jquerycss

Show a collection of files in a table format

Here is the current code I have: index.html <!DOCTYPE html> <html> ... </form> </div> </body> </html> And here is my code.gs function doGet() { return HtmlService.createHtmlOutputFromFile('index'); } ...

javascripthtmlweb-applicationsgoogle-apps-scriptgoogle-drive-api

"Varying hues on various displays: Exploring RGB values and CSS for video color

Recently, I designed a webpage with a background-color of #f4afac. The video embedded in this page also features the same background color throughout, creating a seamless blend with no visible edges. On one screen, the colors appear perfectly consistent. ...

csshtmlvideocolors

Discover the steps to dynamically alter the inclusion of the Bootstrap CSS file within an Angular project

I manage a multi-language website in both English (EN) and Arabic (AR). Currently, I am utilizing Bootstrap CSS from a CDN and adjusting the CDN link based on the selected language. index.html <!DOCTYPE html> <html lang="en"> <h ...

htmlcssangularbootstrap-5

I'm having trouble getting the pasted HTML to work properly

I have been having some trouble with pasting an HTML table into my WordPress site using the Text Editor. I have styled the table with CSS and I have verified that both codes are correct. However, when I paste the table into WordPress or even use the W3Sch ...

htmlwordpress

Error Alert: Express configuration encounters Unforeseen character <

This is how I have set up my Express: const express = require('express'); const app = express(); app.use(express.static('public')); app.get('*', function (req, res) { res.sendfile('dist/index.html'); }); app.li ...

javascripthtmlexpress

Aligning text vertically in a div using Bootstrap, alongside additional content within the same div

I'm attempting to vertically align some text within a div that also contains an image. When I apply the classes "d-flex align-items-center," the text does move to the center, but it appears slightly shifted towards the top. How can I fix this issue? ...

htmlcsstwitter-bootstrapbootstrap-5

difficulty obtaining today's date

Currently, I am facing an issue with displaying the current date in an input field for the user: <input id="uploadformData" ng-model="upload.date" type="date" value="<?php echo date('Y-m-d'); ?>" /> The problem arises when the input ...

javascriptjqueryhtmlangularjs

Padding has an impact on the widths of flexbox items

Take a look at this code snippet: http://jsfiddle.net/56qwuz6o/3/ <div style="display:flex"> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> </div> div div { ...

cssflexbox

Deleting text after an answer has been given using jQuery or JavaScript

I seem to have encountered a problem with the logic I've implemented. The desired functionality is for the user to enter an answer to the question presented. Upon submitting the answer, the current text (first question) should disappear and the next q ...

javascriptjqueryhtmldom

What could be the reason for the child element not occupying the full height of its parent container?

* { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 50px; } .navbar { display: flex; align-items: center; justify-content: center; color: darkgreen; font-family: 'Vollkorn', serif; font-size: 1.2rem; font-w ...

javascripthtmlcss

Why does Froala Editor not maintain formatting when retrieving data from the database?

I've been using the Froala editor to add content on my website, and it's doing well for inserting data into the database. However, I'm facing an issue when retrieving data from the database as it doesn't maintain the original formatting ...

javascripthtmlfroala

How can I import HTML code containing JS from an external source in just one line of code?

I am looking to add external functionality to my web page using a single line .js import that works similar to a plugin. Here is what I currently have: <!--index.html--> <head> </head> <body> <!-- Here is the one-line scrip ...

javascriptjqueryhtmlajaximport

utilize dynamic variable within the template's views

Here is a snippet of my HTML code var marker; function initMap() { map = new google.maps.Map(document.getElementById("mymap"), myOptions); getMapMetadata([]); // setInterval(function(){ getMapMetadata([]); }, 3000); } function createMarke ...

javascripthtmlajaxdjangotweak

How can I use jQuery to locate all elements that match a specific style within the DOM?

Similar Question: How can I target hidden elements? Selecting multiple elements with CSS display:none property <div class="container"> <p style="display:none">I am hidden</p> <p>I am visible</p> <p>I am also ...

javascriptjqueryhtml

Should I Change or Focus in jQuery? What event is best to use with a select dropdown in order to trigger a call to a jQuery-AJAX function?

I have a single select dropdown element in my HTML code: <select id="student" name="student" class="form-control"></select> I am looking to implement a jQuery-AJAX function that will populate the option values in the select dropdown above. H ...

javascriptjqueryhtmlajaxjquery-events

Interpret currency symbols as text

I'm currently dealing with a website that has a structure similar to this (Minimal Reproducible Example): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&q ...

htmlmathjax