1

I have this html code

<table style="font-size:10px">
  <tr>
    <td style="border:1px solid;padding:0">XXX <svg style="vertical-align:middle" width=20px height=20px viewBox="0 0 80 80"><circle cx=40 cy=40 r=40 /></svg>
    <td style="border:1px solid;padding:0">XXX
</table>

first XXX is one pixel higher then second. Is it possible to align text like the second XXX? Although I am able to align it correctly, for example with position:absolute for svg, I would like to use this simple way above.

Improve this question
4
  • That is a funny example and a fully explainable behavior. And a good reason not to mix the text and the image in one cell element. You have to give those parts two separate cells (there is nothing wrong with an empty cell in another row). Also, use vertical-align: middle (it won't help in the same cell). Of course, you should not mess with absolute. Commented 2 hours ago
  • To get an idea of why you have this apparent shift, place your cell content in a line, not in a cell, the text, and then the SVG. To make it apparent, increase the SVG height. Note that vertical-align works on the entire cell content, not on each separate child element. Good or not, but it never works in general case. Commented 2 hours ago
  • Try placing the text inside a <p> tag, which will allow it to be styled independently of the <svg> tag. Commented 1 hour ago
  • Instead of using vertical-align:middle on your svg element, vertical align it by the distance you want to nudge it. This depends on the height of the SVG, the font-size and the font metrics. It's possible to calculate this, but it's quite fiddly. Eye-balling it though, for your example, a declaration of vertical-align:-6.5px seems close enough. Commented 30 mins ago
Related questions
6167
How to disable text selection highlighting
4418
Change an HTML input's placeholder color with CSS
2279
Vertically align text next to an image?
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.