如何使用javascript，css和/或html将文本放在表格中的图像上？

问题描述

如何使用javascript，css和/或html在表格单元格中的图片中心？

我有一个包含图片的HTML表格 - 尺寸 - 我想在每个图像上放置一个文本标签。标签中的文本大小可能不同。水平居中并不困难，但垂直居中是。

补充：我最终不得不使用javascript来使用一个固定大小的div与绝对定位;我只是不能让它工作任何其他方式

解决方案

你可以尝试把图像放在后台。

 < table> 
< tr> 
< td style =background：url（myImg.jpg）no-repeat; vertical-align：middle; text-align：center> 
这是我的文本
< / td> 
< / tr> 
< / table> 
  

你只需要设置单元格的高度和宽度， / p>

How to center text over an image in a table cell using javascript, css, and/or html?

I have an HTML table containing images - all the same size - and I want to center a text label over each image. The text in the labels may vary in size. Horizontal centering is not difficult, but vertical centering is.

ADDENDUM: i did end up having to use javascript to center the text reliably using a fixed-size div with absolute positioning; i just could not get it to work any other way

解决方案

you could try putting the images in the background.

<table>
    <tr>
        <td style="background: url(myImg.jpg) no-repeat; vertical-align: middle; text-align: center">
            Here is my text
        </td>
    </tr>
</table>

You'll just need to set the height and width on the cell and that should be it.

这篇关于如何使用javascript，css和/或html将文本放在表格中的图像上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！