Menu
<td>
<img src="http://blog.garethjmsaunders.co.uk/wp-content/feed-icon-16x16.gif"/>
My feed
</td>
This is how it looks like:
(source: garethjmsaunders.co.uk)
My feed
The icon and the text is misalligned vertically. The icon is on the top of the table cell, the text is on the bottom. Both the text and the icon occupy 16 pixel but the cell still eats up 19. How can I align them to save those 3 pixels?
419
HTML | <td> valign Attribute The HTML <td> valign Attribute is used to specify the vertical alignment of text content in a cell. Attribute Value: top: It sets the content to top-align. middle: It sets the content to middle-align.
Using flex property in css.To align text vertically center by using in flex using align-items:center; if you want to align text horizontally center by using in flex using justify-content:center; .
Using the float property of CSS will allow you to place an image and text on the same line without breaking the line break. Or Alternatively, you should use the flexbox method of CSS that uses the flex property to make sure that images and lines are aligned in the same line.
Well, if you choose the background image method, then it is very simple:
background: url(feed.png) left center no-repeat
The image is aligning to the base line of the text, this does not include the descender height which is the 'tick' in letter like g or y.
If the height of the row/cell is to be fixed, you can add line-height to get it to vertically centre. So for instance, assuming your cell is 16px high:
td.feed {
line-height:16px;
}
The other option would be to add the icon as a background image, adding padding-left to the cell:
td.feed {
background: transparent url(/wp-content/feed-icon-16x16.gif) no-repeat left center;
padding-left: 18px; /* width of feed icon plus 2px spacing */
}
The second one would mean you could remove the need for tables at all, now there's an idea...
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
