CODEWITHSUNDEEP
htmlcss
Denys Wessels
Denys Wessels

Reputation: 17039

Center align text in td next to the image

This is how the text looks at the moment

enter image description here

HTML:

<td style="vertical-align:middle;">
   <img src="~/Images/Cancel.png" style="width:80px;height:80px" id="btnCancel" />
   <span style="color:White;font-size:27px;font-weight:bold;">CANCEL</span>
</td>

How can I vertically align the text next to the image so it's in the middle?

Upvotes: 0

Views: 465

Answers (4)

Akshay Mohite
Akshay Mohite

Reputation: 109

<td style="vertical-align:middle;">
   <img src="~/Images/Cancel.png" style="width:80px;height:80px;float:left" id="btnCancel" />
   <span style="color:White;font-size:27px;font-weight:bold;float:left; padding:24px 0 0 0">CANCEL</span>
</td>

Upvotes: 0

Martin
Martin

Reputation: 1226

If you make both the image and span display:inline-block you will be able to user vertical-align: middle.

<td style="vertical-align:middle;">
   <img style="display: inline-block; vertical-align:middle; width:80px; height:80px" src="~/Images/Cancel.png" id="btnCancel" />
   <span style="display: inline-block; vertical-align:middle; color: White; font-size: 27px; font-weight: bold;">CANCEL</span>
</td>

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99484

You could remove the vertical-align:middle; from the table cell and apply that CSS declaration to both <img> and the span> element, as follows:

<td>
    <img src="http://placehold.it/100" style="width:80px;height:80px;vertical-align:middle;" id="btnCancel" />
    <span style="color:black;font-size:27px;font-weight:bold;vertical-align:middle;">CANCEL</span>
</td>

WORKING DEMO.

That's because the inline elements themselves are aligned in their baseline by default.

Upvotes: 2

Richa
Richa

Reputation: 4270

Try giving float:left in css:

<img src="~/Images/Cancel.png" style="width:80px;height:80px; float:left" id="btnCancel" />
<span style="color:White;font-size:27px;font-weight:bold; float:left margin:5px 0 0 5px;">CANCEL</span>

Upvotes: 1

Related Questions