Align the image vertically at the bottom of a table

Dealing with a common CSS alignment challenge:

<table style="width:100px"> <!-- Not really needed, just for brevity -->
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">           
            Example of lengthy content that dynamically increases cell height.
         </div>
      </td>
      <td>
           <div>text</div>
          <div ></div>
           <img style="vertical-align: bottom;" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/1118727_100000298033362_1412277170_q.jpg"/>
      </td>      
   </tr>
</table>

http://jsfiddle.net/R5TAY/

Any suggestions on how to always display the image at the bottom of the table and keep the text centered?

Appreciate any help!

Answer №2

To adjust the alignment of content vertically, you can utilize the vertical-align CSS property:

#your_td {
 vertical-align: bottom;
}

Take a look at this FIDDLE

Answer №3

Adjust the vertical alignment to the bottom

<td valign="bottom">

I trust this information will be beneficial for you

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

Tips on aligning header and column divider lines when scrolled all the way to the right in free jqgrid

When jqgrid is scrolled all the way to the right, the column separator lines become misaligned. To replicate this issue, widen the jqgrid beyond the browser window or decrease the browser window width until a horizontal scrollbar appears. Then scroll hori ...

Stop header background image from loading on mobile browsers by utilizing the <picture> tag

Is there a method to utilize the <picture> element in order to prevent a page from downloading an image when viewed on a mobile phone? I have a website that features a header image. Unfortunately, due to the site's functionality, using CSS (bac ...

Issues with Flex layout in Firefox causing functionality errors

My two text inputs are not cooperating with flex properties as expected. They should be positioned like this: https://i.sstatic.net/ZSumb.png However, they are currently positioning like this: https://i.sstatic.net/e430n.png CSS .container{ width ...

Utilize a button within a form to add additional variables to a URL that already contains variables from a separate form

I operate a website that features a search bar and checkboxes for adding variables to the URL: term = "test" variable1=1 url/search?term=test&variable1=1 After completing the initial search, I have additional forms on the left side of the page with m ...

Achieving inline behavior for two divs using React

// Custom JavaScript code const hookFunction = () => { const {useState, useEffect} = React; const Slider = props => { const { innerWidth: width, innerHeight: height } = window; const urls = [ "https://www.imb. ...

Creating a website with a seamless image background that fills the entire page

! Is it possible to achieve the same effect using AngularJS? Below is the CSS code: .bg { background: url(holiday-car-rental.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-s ...

I have a simple inquiry regarding the customization of table designs

I struggle with html/css, so I could really use some assistance. Here's a fiddle of a table link to fiddle. The td rows are currently the same width, but I want to set specific widths for each column - 200px for the left column and 50px for the right ...

Uncheck the previous option selected in a multi-select dropdown using jQuery

Hey there, I've been facing an issue with my change handler when trying to add or remove values from an Array. It works fine until the last element is selected, at which point the change event does not fire properly. Has anyone else encountered this p ...

After submitting the form, the delete button in Bootstrap 4 has transformed into an unusual shape

I have a panel on my page, inside the panel header there is a red delete button. The panel content includes a form with several buttons (the red delete button is not inside the form, but linked to it with the form="abc" attribute). In the image below, whe ...

Why isn't my topmenu positioned correctly on screens of varying widths due to responsive CSS?

Welcome, I am in the process of learning CSS and responsive design. I have an index page that consists of a header, top menu, main text content, and footer. The top menu layout works well up to 300px, but when it goes under 300px, only the additional link ...

Does Jquery AJAX send back raw data or HTML ready for use?

I'm currently developing a mobile app using Jquery Mobile. In order to populate the app with data, I need to make requests to an API and display the information within the app. At this point, I have two possible options: The API returns JSON data ...

Utilizing jQuery and html5 for manipulating the DOM with append()/appendTo() functions while taking

Instructions on Replicating: Begin by creating an html5 page. Ensure that you have included the script from remysharp.com/2009/01/07/html5-enabling-script/ so that Internet Explorer can recognize the tags. Add a hardcoded <section id='anyt ...

Having trouble reaching HTML input controls generated in the code behind from a literal

Looking for help with an issue on my aspx page. I added a literal control: <asp:Literal runat="server" ID="ControlLiteral"></asp:Literal> In the codebehind, I am using a loop to create controls dynamically. Here is an example of what I am try ...

Seamlessly adaptive HTML5 video playback

Has anyone figured out how to make an HTML5 video in an absolutely positioned <video> element resize to fit the window width and height without ever getting cropped? Many solutions I've come across rely on using the <iframe> tag, which is ...

turn off redundant div wrapper in React

Is there a way to remove the extra div wrapper in React when using ES2015? This additional wrapper is causing issues with centering my component in C#. #First div .default-content { margin-right: auto; margin-left: auto; padding: 16px 16px 16 ...

arrange object array in descending order based on an object's numerical value within it (using Angular-Typescript)

Looking for assistance with sorting an array of user objects based on their scores. Each user object contains properties like userId, userName, and score. My goal is to create a leaderboard where the user with the highest score appears at the top, followed ...

Issues encountered with the functionality of face-api and tensorflow.js within the browser

I've been trying to execute this example in the browser Check out the example here Specifically looking at this code snippet <!DOCTYPE html> <html> ... (Contents of the code snippet) ... </body> </html> Unfortunately, I&apos ...

Scrolling effect made with CSS for displaying a carousel of logos

Seeking assistance in creating a LOGO slider that seamlessly transitions at the end. I have resorted to duplicating a section to ensure continuous movement. I opted for using the translateX value for the animation effect. .box { width: 600px; //ove ...

When HTML code is included within PHP, it appears as plaintext when sent via email

I'm currently facing a challenge with incorporating HTML into PHP for email purposes. Initially, I attempted to input the HTML directly into the variable by placing PHP double quotes and keeping the HTML in single quotes. However, this approach result ...

The alignment of inline-block elements is not being maintained on the same line

Here's a question I have about my embedded form. Why does the display property of inline-block make the "submit" and "terms" elements appear higher than the email field? And more importantly, how can I fix this issue? I've attempted to use the t ...