How can you align text underneath another line of text in HTML by utilizing display: inline, or is there an alternative method?

I am looking to rearrange the layout of my book listings so that the price is positioned below the title rather than beneath the book images.

Current Appearance: https://i.sstatic.net/xRUdM.png

search.html:

.resultContainer {
  width: 100%;
  position: relative;
  left: 0;
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: black solid 1px;
}

.bookImage,
.bookTitle {
  margin-left: 20px;
}
<div class="resultContainer">
  <div style="display: inline;">
    <img class="bookImage" src=" https://marketplace.canva.com/MAB___U-clw/1/0/thumbnail_large/canva-yellow-lemon-children-book-cover-MAB___U-clw.jpg" alt="  book.title " width="120" height="160">
    <span class="bookTitle">
                Title Here<br/>
                <span class="bookPrice">
                    Price Here
                </span>
    </span>
  </div>
  <div class="bookTitle"></div>
</div>

htmlcss

Answer №1

To achieve this, one effective method is utilizing the power of flexbox

.resultContainer {
  display: flex;
}

.wrapper {
  display: flex;
  align-self: center;
}

.bookImage,
.bookTitle {
  margin-left: 20px;
}
<div class="resultContainer">
  <img class="bookImage" src="https://picsum.photos/200" alt=" {{ book.title }} " width="120" height="160">
  <div class="wrapper">
    <span class="bookTitle">
            Sample Book Title <br/>
            <span class="bookPrice">
                $399
            </span>
    </span>
  </div>
  <div class="bookTitle"></div>
</div>

Answer №2

For those seeking guidance on the display:inline issue, I have a solution to offer.

It's important to note that nesting spans is not recommended in your code structure. I've addressed this by replacing the nested elements with div wrappers. Additionally, I've enclosed the img element within its own wrapper. To ensure compatibility with the parent inline element, I've set the wrappers (child elements) to inline-block, providing a viable solution to your problem.

.resultContainer {
  width: 100%;
  position: relative;
  left: 0;
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: black solid 1px;
}

.bookImage,
.bookTitle,
.bookPrice {
  margin-left: 20px;
}

.content-wrap,
.img-wrapper {
  display: inline-block;
}
<div class="resultContainer">
  <div style="display: inline;">
    <div class="img-wrapper">
      <img class="bookImage" src=" https://marketplace.canva.com/MAB___U-clw/1/0/thumbnail_large/canva-yellow-lemon-children-book-cover-MAB___U-clw.jpg" alt="  book.title " width="120" height="160">
    </div>
    <div class="content-wrap">
      <span class="bookTitle">Title Here</span>
      <br/>
      <span class="bookPrice">Price Here</span>
    </div>
  </div>
  <div class="bookTitle"></div>
</div>

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 email message content is not displaying correctly

I'm in the process of merging multiple HTML tables into a single $message, which will then be passed to the email body as shown below. // Sending the email if(smtp_mail($To,$cc, $Subject, $message, $headers)) { echo "Email Sent"; } else { echo "An ...

htmlcssemailhtml-email

What is causing the alt or title tags to not function properly in emails?

I am currently facing an issue with e-mail templates that include images. The problem arises from the fact that these images need to be downloaded before they can be displayed in the email. To work around this, I always use ALT and TITLE tags to provide de ...

htmlemailoutlookhtml-email

Ensure that all values are in a single row on the webpage

I'm currently working on a web application that requires a label, textbox, and button to be aligned in one row. However, they are displaying in separate rows. Below is the code I have been using: <div class="form-group row"> <label clas ...

html

Styling the background of a container in CSS using Bootstrap

Currently, I am utilizing bootstrap and trying to find an elegant solution for adding a background to my container. Specifically, I am working with the bootstrap class container, as opposed to container-fluid. The official Bootstrap documentation advises ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Created new rows in a table using jQuery, only to find that they disappear upon refreshing the browser

I used jQuery to dynamically add rows to an HTML table, but the problem is that when I refresh the browser, the added rows disappear. How can I make sure these rows stay even after refreshing the page? <TABLE id="dataTable" width="100%" align="center ...

jqueryhtmlhtml-tablerow

Tips for switching the background image in React while a page is loading?

Is there a way to automatically change the background of a page when it loads, instead of requiring a button click? import img1 from '../images/img1.jpg'; import img2 from '../images/img2.jpg'; import img3 from '../images/img3.jpg& ...

javascripthtmlcssreactjs

Difficulty with rendering content from Angular routes

Currently, I am working on a movie application where users can click on a details button to view information about a specific movie. However, I am facing an issue in displaying the information for the selected movie without showing all the movies at once. ...

javascripthtmlangulartypescript

A step-by-step guide on how to display a specified amount of images in the center of

I'm currently working with a div that displays images dynamically loaded from a database, ranging from 1 to 5 images. The number of images may vary each time, and I need assistance in centering these images inside the div regardless of their quantity. ...

htmlasp.netcss

Alert displayed at the center of the browser when the value surpasses the specified number

My webpage retrieves SNMP data using PHP and displays it with HTML, color-coding the values. I want to add a pop-up alert when a value exceeds a certain number. I have attempted different jQuery solutions without success. The PHP code to get the value: ...

javascriptphpjqueryhtmlcss

Even when template paths are specified, tailwindcss still remains unpurged

When running npm run build in production mode, I am encountering an issue where my Tailwind styles are not being purged. Despite filling the purge array in tailwind.config.js with template paths for webpack + postcss setup, I keep seeing the following warn ...

csswebpacktailwind-css

Error encountered in ASP.NET Core MVC due to dependency inversion with CRUD operations

Today I delved into dependency inversion. Prior to implementing this concept, my CRUD system was functioning well, but now I am encountering some errors. The error message says "Cannot implicitly convert type int to ContractLayer.UsersDto." In the image pr ...

c#htmlasp.net-mvcasp.net-corerazor-pages

Implementing yadcf and a fixed column filter in a Bootstrap datatable

I am currently utilizing Bootstrap DataTable in conjunction with the Yadcf filter plugin. The filter is functioning correctly for a regular table, however, when I have a fixed column with a Select2 dropdown, it does not render properly. The dropdown is hid ...

javascriptcssbootstrap-4yadcf

What is the best method for getting rid of blank white space on my website?

Having some trouble removing unnecessary white space on my website. The goal is to have the main text and logo centered on an image background, but I've been unsuccessful so far. I've experimented with different CSS properties like overflow-x: ...

htmlcss

The image grows in size until it requires scrolling to view the entire thing

<!-- Bootstrap 4.1.x --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <! ...

htmlcssbootstrap-4responsive-design

Position the mat-icon button in the top right corner for the close button

I'm struggling with positioning my close icon button at the top right corner of my dialog box. Here is my app-iconbutton component: <button mat-icon-button class="iconbutton" [ngStyle]="{ 'background-color': back ...

cssangularangular-materialangular13

"Customizing the color of the arrow in Bootstrap tooltips

Trying to customize tooltips in twitter-bootstrap, I set the template option of the tooltip with inline styles to achieve red tooltips instead of the default black color: $(document).ready(function(){ options = { container: 'body&ap ...

csstwitter-bootstrap

Doesn't the .stop(true) function completely clear the queue as it should?

My slideshow has a hover function to pause it using .stop(true). Upon mouse exit, it should resume playing from where it left off. However, currently, when I hover over it, the animation stops and then continues until it reaches its target, pausing there a ...

javascriptjqueryhtmlcss

Ways to update the value in localstorage with the click of a button

After a user inputs a numerical value on one screen of my web app, the value is stored in local storage. On the next screen, the user can click a button to increment the stored value by a specified amount, such as adding 5. For example, if the variable X i ...

javascripthtmllocal-storage

Guide on how to utilize JavaScript to redirect to a URL for PUT or POST requests by clicking a button

I have a button <button class="delivery-orders-button" onclick="markDone(${order.order_id})">Dispatch order</button> and my goal is to have the markDone function redirect the user to a designated page, similar to how forms ...

javascripthtmlexpress

Interact with the :before pseudo element when hovering over an element

Is there a way to manipulate the :before pseudo element when hovering over the main element? My goal is for the pseudo element to change its height when I hover over the main element. This is how my code looks: HTML <div class="object">& ...

htmlcsspseudo-element