CODEWITHSUNDEEP
htmlhtml-table
Rocky
Rocky

Reputation: 55

How to vertically align Text in the middle with an Image in the same HTML Table Cell

Here's the Output screenshot

I'm struggling to vertically align text with an image within the same HTML cell that they share. I'm sharing a simpler version of the test html file I created, but in the past I've tried everything from CSS and nested tables but somehow couldn't get it to work. Appreciate the help.

CSS:

    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 25%;
        }

        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        tr:nth-child(even) {
            background-color: #dddddd;
        }
    </style>

Html:

<table>
    <tbody>
        <tr>
            <th>Col-1</th>
            <th>Col-2</th>
        </tr>
        <tr>
          <td><img src="Star.png" style="width:60px">  Static Text</td>
          <td>Static Text</td>
        </tr>
    </tbody>
 </table>

Upvotes: 2

Views: 47

Answers (1)

xmaster
xmaster

Reputation: 1050

It's very simple. Use vertical-align: middle; on the image. It will push the text to the center as well.

Example

Also if I were you I wouldn't use inline CSS. It can give problems in future, use instead an external CSS file

Upvotes: 2

Related Questions