Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to correctly vertical align image+text inside table cell

Tags:

html

css

I need to vertical-align:top both 'Some text' and 'Other text'. The following is not working for me, only the second cell is aligned correctly. I don't understand what the problem is.

<style>
    td {
      vertical-align:top;
    }
</style>

<table>    
    <tr>
        <td><img src="icon.png"/> Some text </td>
        <td> Other text </td>
    </tr>
</table>   
like image 648
user1517081 Avatar asked Dec 11 '12 21:12

user1517081


People also ask

How do you vertically align text in a table cell?

To place an item at the top or bottom of its cell, insert the "VALIGN=" attribute within the code for that cell. To vertically align an entire row (e.g., placing all data in that row at the tops of the cells), insert the "VALIGN=" attribute within the code for that row.

How do I vertically align an image in a table?

Answer: Use the CSS vertical-align Property You can align an image vertically center inside a <div> by using the CSS vertical-align property in combination with the display: table-cell; on the containing div element.

How do I vertically align text and an image?

We need to create a parent element that contain both image and text. After declaring the parent element as flexbox using display: flex; we can align the items to the center using align-items: center;. Example: This example uses flexbox to vertically align text next to an image using CSS.

How do you align an image in a table cell in HTML?

The <img> align attribute is used to set the alignment of an image. It is an inline element. It is used to specify the alignment of the image according to surrounding elements.


1 Answers

Rather than using:

td {
    vertical-align: top;
}

Use:

td {
    vertical-align: baseline;
}
td img {
    vertical-align: top;
}
like image 170
joshnh Avatar answered Sep 28 '22 19:09

joshnh