Having difficulty aligning an image vertically within a table cell

I am facing an issue with aligning images in table cells. Specifically, I have four table cells and want to vertically align a smaller image at the top of its cell. Despite trying to use vertical-align:top for the image within the cell, it doesn't seem to work. I have inspected the code using Firebug but cannot identify the cause of the problem.

<table class="store-table">
<tr>
<td class="merch-name" colspan="2"><a title="Everybody Needs Love" href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&amp;PP=1" target="_blank">Everybody Needs Love</a></td>
<td class="merch-name" colspan="2"><a title="Jimmy Clanton In Concert" href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX" target="_blank">Jimmy Clanton In Concert</a></td>
</tr>
<tr class="pics">
<td style="width: 25%;"><a href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&amp;PP=1"><img class="alignnone size-full wp-image-345" alt="everybody-needs-love" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/everybody-needs-love.jpg" /></a></td>
<td style="width: 25%;">$15.00</td>
<td style="width: 25%;"><a href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX"><img class="alignnone size-medium wp-image-312" alt="Jimmy Clanton In Concert" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/In-Concert-Cover-178x300.jpg" width="178" height="300" /></a></td>
<td style="width: 25%;">$20.00</td>
</tr>
</table>

The page where this issue is occurring can be accessed at:. There are three rows of content on the table, with the problematic row being the second one.

csshtml-tablevertical-alignmentcss-tables

Answer №1

To properly align content vertically within the td element, make sure to include the vertical-align property in the styling like this:

<table class="store-table">
  <tr>
    <td class="merch-name" colspan="2"><a title="Everybody Needs Love" href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&amp;PP=1" target="_blank">Everybody Needs Love</a></td>
    <td class="merch-name" colspan="2"><a title="Jimmy Clanton In Concert" href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX" target="_blank">Jimmy Clanton In Concert</a></td>
  </tr>
  <tr class="pics">
    <td style="width: 25%; vertical-align:top;"><a href="http://kunaki.com/Sales.asp?PID=PX00XUQBLL&amp;PP=1"><img class="alignnone size-full wp-image-345" alt="everybody-needs-love" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/02/everybody-needs-love.jpg" /></a></td>
    <td style="width: 25%;">$15.00</td>
    <td style="width: 25%;"><a href="http://kunaki.com/Sales.asp?PID=PX00Z59GSX"><img class="alignnone size-medium wp-image-312" alt="Jimmy Clanton In Concert" src="http://www.josephruscitti.com/clients/jimmyclanton/wp-content/uploads/2014/06e-Cover-178x300.jpg" width="178" height="300" /></a></td>
    <td style="width: 25%;">$20.00</td>
  </tr>
</table>

As a side note, it's not ideal to apply inline CSS styles to every cell in the table. It's better practice to use separate CSS rules, such as:

.store-table td { width: 25%; }

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

Dynamic Height in React Material-UI Table with Sticky Headers and Multiple Rows

Currently, I am working with React and Material-UI to create a table that needs to have a sticky header for a multi-row table head. The challenge I'm facing is that I don't want to specify a fixed height for the table, but instead have all lines ...

htmlcssreactjsmaterial-ui

The loading of the Bootstrap tagsinput has encountered an error

I am facing an issue with my Django application where tags are not loading properly in an input field using jquery. It seems like the application is unable to locate the bootstrap-tagsinput.css and bootstrap-tagsinput.js files. Can anyone provide guidance ...

javascriptjquerycssdjangotwitter-bootstrap

Ensure the HTML table's <td> cell width automatically adjusts to accommodate the image, regardless of its dimensions

Has anyone encountered a strange issue while building an HTML table for an HTML email? Whenever I insert an image into a <td>, it causes the cell to expand to its maximum width, affecting all the columns to the right by resizing them to their minimum ...

htmlcsshtml-table

Creating an HTML table on-the-fly leads to the opening of a fresh new webpage

Has anyone encountered this issue before? I have a math table coding function, which runs when a button is clicked. However, when I click the button, the table appears on a new page instead of on the same page. <!doctype html> <html> <h ...

javascripthtmlcssloopsfor-loop

Is it possible to reach this result without relying on Modernizr?

Due to personal reasons that I won't delve into, my goal is to replicate the functionality of this menu : demo : http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ However, I want to achieve this without using Modernizr and poss ...

javascriptjqueryhtmlcssmodernizr

Do css classes consistently provide a solution to issues with style overrides?

Would it be more beneficial to utilize css .class instead of #id to avoid issues with style overriding and importance? #content ul li a {font-size:10px} #content .demo ul li a {font-size:15px} ...

css

Is it possible to modify the sub/child divs within a draggable parent div and assign them a different class?

Greetings, after being a long-time reader, I have finally decided to post for the first time. In the process of creating a webpage with jQuery drag and drop divs, I am curious about how to change the class of a child div within a draggable div once it is d ...

javascriptjqueryhtmlcssjquery-ui

When interacting with Chrome, the div gets automatically blurred upon being clicked

While working on the development of our website, we stumbled upon something peculiar. We have a set of divs displayed on the screen, resembling the layout of Pinterest. Upon clicking any of these divs, the content within that particular div is loaded into ...

jqueryhtmlcssgoogle-chrome

Problem with Flickity's is-selected feature

I am currently exploring Flickity and its functionality. I have a carousel that auto-plays, with the selected cell always placed in the middle and highlighted with a grey background. However, I would like to customize it so that the selected cell is positi ...

htmljquerycssflickity

difficulty with displaying the following image using jquery

I have referenced this site http://jsfiddle.net/8FMsH/1/ //html $(".rightArrow").on('click',function(){ imageClicked.closest('.images .os').next().find('img').trigger('click'); }); However, the code is not working ...

javascriptjquerycsshtml

js include exclude switch a category

Although this question has been asked before, I have a query on completely removing an "id" from an element. Let's consider the following scenario: <div id="page"> some content here </div> I want to eliminate the "id" attribute from the ...

javascriptjqueryhtmlcss

Inject the code snippet from CodePen into a WordPress webpage

I have a WordPress page where I want to integrate the HTML, CSS and JS code from my Codepen project. The styling appears to be working correctly, but the JavaScript is not functioning as expected. You can view the page here: Could someone assist me in pr ...

javascripthtmlcsswordpresspost

Flexbox mystery: How come the entire div isn't displayed when the element below it is hidden?

I am in need of a versatile column layout where multiple widgets are stacked vertically, adjusting their size dynamically. Each widget consists of a title and scrollable content. The last widget should have the ability to collapse when its title is clicked ...

cssflexbox

Guide to optimizing the display of a responsive iframe across various devices such as mobile and desktop

I have implemented the following CSS in an iframe to make it responsive. It works well on desktop browsers, but on mobile browsers, the iframe only displays half of the screen. Can you please review the code below and provide guidance on how to fix this is ...

htmlcss

Exploring React's Primary Button Color Implementation

I am attempting to customize the buttons in my theme for various states such as contained, primary, and hover. However, my current approach is not yielding the desired results. VIEW CODESANDBOX DEMO: CLICK HERE theme/overrides/MuiButton.js import palet ...

cssreactjsmaterial-uijss

The HTML div is not aligned in the center even when using flexbox

After creating a list within a centered flex div, it seems that the list is not aligning properly. I used flex on the list-div2 and the translate rule in the parent's middle-text div, but it still doesn't look centered as expected. Can anyone p ...

htmlcssflexbox

Transforming numerical figures into written form within a specified range: A step-by-step guide

I have a unique custom range design that I have personally customized. Beneath each step of the range, there is a value displayed in a stylish green box. https://i.sstatic.net/vzeRK.png My query is regarding how I can replace the numeric values with tex ...

javascripthtmlcss

Comparing attribute selectors to class selectors in the realm of styling

I often come across code that looks like this: <input type="text" class="class1" name="text"> <input type="submit" class="class2" name="submit"> which is then styled as follows: input[type=text] { styles here...} input[type=submit] { sty ...

cssclassattributescss-selectors

Sliding Up Transition Effect for Footer with JQuery or CSS3

I am attempting to replicate a sleek slide up footer that caught my eye on The Internship Movie Site. I have created the wireframe layout, but I am struggling to figure out the correct CSS transition effect. Although I have experimented with the "top" and ...

jqueryhtmlcss

Truncate a string in Kendo Grid without any white spaces

While using a Kendo-Grid for filtering, I've come across an issue where my cell does not display the full string if there is no white space. The problem can be seen in the image below: https://i.sstatic.net/0h1Sg.png For example, the string "https:/ ...

htmlcssangularfrontendkendo-grid