html – Align the text to the left, the image floats to the right and is centered vertically inside a.

As the title suggests, I have an HTML table with some columns. In one of these columns, which is. width: auto I want to display the text left and right. Image / Image right. And floats, because there is a picture. Optional (I mean it can’t be in some rows and I want the text to use all available space. <td> in that case).

Here is the JSFiddle example: https://jsfiddle.net/4d8foL32/2/

The basic code is:

<tr>
  <td>4000.4</td>
  <td>Lemon soda<img src=""></td><!-- This is the line -->
  <td>10/10/2021</td>
  <td>London, United Kingdom</td>
  <td>Waiting</td>
</tr>
img {
  float: right;
  padding-right: 2px;
}

There are 2 issues I want to address:

  1. I would like the image to always be centered vertically on the line.

  2. When browsers reduce the width of the window (and therefore the width of the table), the image is not split on a new line, keeping it to the right.

    Issue 2

The image should have a small padding on the left side so that it does not go over the text. What is the best way to handle this?

Write a Comment

Your email address will not be published. Required fields are marked *