ensuring that the brief description on my thumbnail is consistently centered

I am facing an issue with aligning text consistently in the middle of thumbnails on my website. Regardless of whether the text spans 1, 2, or 3 lines, I want it to always be positioned inline with the center of the thumbnail. I have tried various methods such as setting a fixed height for the text container, using vertical-align: middle, and display: table-cell, but none of them seem to work for me. If anyone has a solution to this problem, I would greatly appreciate it.

HTML

<ul id="container">
    <li>
        <a href="#">
        <img src="http://dummyimage.com/120x80/000/fff" />
        <p class="desc">This is the text on 2 lines</p>            
        </a>
    </li>  
<li>
        <a href="#">
        <img src="http://dummyimage.com/120x80/000/fff" />
        <p class="desc">This is the text</p>            
        </a>
    </li>  
<li>
        <a href="#">
        <img src="http://dummyimage.com/120x80/000/fff" />
        <p class="desc">This is the text going onto 3 lines</p>            
        </a>
    </li>      
</ul>​

CSS

#container li{float:left;width:230px;margin-right:10px;}
#container li a{position:relative;display:block;}
#container li a img{float:left;}
#container li a .desc{position:absolute;right:0;width:100px}​

Link to fiddle: http://jsfiddle.net/Luvq3/1/

Answer №1

HTML

 <ul id="container">
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the content</p></div>           
            </a>
        </li> 
    <li>
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the content</p></div>           
            </a>
        </li> 
     <li>
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the content</p></div>           
            </a>
        </li> 
    <li>
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the content</p></div>           
            </a>
        </li>     
     <li>
            <a href="#">
                <div class="column"><img src="http://dummyimage.com/120x80/000/fff" /></div>
                <div class="column rightcol"><p class="desc">This is the content on two lines haha</p></div>           
            </a>
        </li>      
    </ul>​​​​​​​​​​​​​​

CSS:

#container li{float:left;width:230px;margin-right:10px;}

.column {display:inline-block; vertical-align:middle}
.rightcol {width:100px;}​

Answer №2

Why not utilize absolute positioning since the height of the thumbnail is known?

#main-wrapper ul li a .description { position:absolute; right:0; top: 20px; width:100px }

You could easily manage the .description using a substring to prevent it from extending beyond the thumbnail.

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

Limit the selected values to calculate a partial sum

Imagine two distinct classes called professor and student: professor.ts export class Professor { id: number name: string } student.ts import { Professor } from "./professor" export class Student { ...

Trouble with Hero Unit Styles not being implemented

Looking to convert a PSD design to HTML using Bootstrap, but the hero unit is not displaying its default style as expected. <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> ...

challenges encountered while using .css() to customize the height

Currently, I am working on a tutorial to learn about basic jQuery plugins. I am facing a challenge in understanding why my code is not adjusting the height of my <p></p>. The task requires creating a plugin that can set the height of specified ...

Is there a way to dynamically adjust the font size to perfectly fit the content within a div?

There is a division element containing text: <div style="white-space:nowrap;overflow:none;width:50px;"> With some text in it </div> Is there a way to adjust the font size of the text within the division so that all of the content is display ...

Establishing the REM value for all CSS properties

My goal is to implement the use of rem units throughout my website. However, relying on the standard rem-to-px conversion rate doesn't feel very intuitive: 10px = 0.625rem 12px = 0.75rem 14px = 0.875rem 16px = 1rem (base) 18px = 1.125rem 20px = 1.25r ...

The image displays successfully on desktop, however, it fails to load once the website is deployed on GitHub or Netlify

While developing this website on my Mac, I encountered an issue where images load fine when I copy the project path from Atom to Chrome. However, once I push the same code to GitHub and then publish it on Netlify, the image fails to load. Does anyone kno ...

How can HTML output be automatically indented?

Seeking a way to automatically indent the HTML generated by my PHP script. I currently use HTML Purifier for validating internal textbox inputs, but I have reservations about using HTML Tidy due to its lack of active development and numerous reported bugs ...

Is it possible to open an image using the tag "a"?

When building my webpage, I opted to utilize webpack. In order to display multiple images on the page, I sought out a library called "lightbox2" online. This particular library allows for image popups when clicked and comes with a simple example: <a ...

unable to expand navbar in Angular 5 project with Bootstrap 4

I am encountering an issue with my navigation bar in a project that uses Angular5 and Bootstrap4. The navigation bar is supposed to expand when the screen size is small, as indicated by the navbar-expand-sm class in Bootstrap4. However, the navbar remains ...

The <h> tag gains height on its own accord

Here is my original code: <h4 class="orange2" ><a href="<?php echo base_url();?>v/<?php echo $this->uri->segment(3);?>/<?php echo $v['uniq'];?>"><?php echo trim(strip_tags($v['video_name']));?> ...

Is there a way to synchronize the expanded row data with the columns of the main table in Material UI's collapsible table?

I have a feature where, upon clicking the expand icon, a row is expanded. I am looking to align the data of these expanded rows with the columns of the main table. To achieve this, I am utilizing Material UI's collapsible table component! How can I i ...

Ways to insert text inside a border

I'm struggling to figure out how to insert text within a border. Can someone guide me on how to accomplish this? Is there a way to place text in the center of a border? I have included a screenshot for reference. ...

How to ensure text wraps when resizing window in CSS? The importance of responsive design

UPDATE: I finally fixed my scaling issues by setting the max-width to 760px. Thank you for the tip! However, a new problem has emerged - now my navigation scales in the small window and I want it to remain a fixed size. Hello everyone! I am currently lear ...

Is it possible to extend the height of a floating child to match that of the parent element

Can CSS alone make this possible? The answer seems to elude me no matter where I look! I'm trying to create a left and right nav bar that extends to 100% height, essentially reaching the end of the page. There are three floated columns inside a float ...

Ways to expand the dimensions of a Popup while including text

I am using a bootstrap modal popup that contains a Treeview control in the body. The issue arises when the node's text width exceeds the popup's width, causing the text to overflow outside of the popup. Is there a way to dynamically adjust the ...

Providing access to information even in the absence of JavaScript functionality

Is it possible to make the content of a webpage using jQuery/JavaScript visible even when JavaScript is disabled? Currently, I have a setup where clicking on an h2 header will display information from div tags using the jQuery function. I've made sur ...

Blending images together can obscure surrounding elements

Is there a way to make two images crossfade on hover without hiding the text underneath? I need the text to show below the image, not behind it. Any suggestions on how to solve this issue? #center { text-align: center; } #under { text-align: cente ...

Substituting Hebrew characters for Mandaic characters within certain HTML tags can cause links to malfunction

What causes the JavaScript code provided to replace Mandaic characters with Hebrew characters on a webpage to also disable all links on the page? The code snippet is as shown below: function replaceMandaicCharacters() { const mandaicLetters = "&bsol ...

Struggling to add a border to an HTML div element

I'm completely baffled as to why I can't seem to add a border around my div. Here is the link to my jsfiddle: http://jsfiddle.net/4HnKs/1/ It's possible that I've been staring at my computer screen for too long, but no matter how hard ...

"Techniques for incorporating a screen in Angular application (Switching between Edit and View modes) upon user interaction

We are currently working on a screen that requires the following development: This screen will have the following features: When clicking on a button, the fields should become editable. In the image provided, there is some repeated data, but in our case, ...