Question

html中table表格里添加图片和文字问题

这是我在table 表格里<td>标签中添加的一个图片跟几个文字,现在的问题是,我想让文字的位置居中,现在的文字是跟图片底部平行,想做成这种样子:如下

想让文字在图片的右边中间的红框位置,下面是我的代码:

请问我应该怎么做.





Answer 1

给左侧的图片加一个css样式： vertical-align: middle，如下图。

代码 如下图：

拓展资料：

vertical-align的是属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元

格框中的单元格内容的对齐方式。

可能的值：

参考资料：《W3school--vertical-align 属性》

Answer 2

添加方法如下：

1、table里添加图片可以使用img标签实现或者使用css的背景图片是实现，代码如下：

<table>
<tr><td><img src="xx.jpg"></td></tr>
</table>

css实现如下：

<table>
<tr><td style="background:url(xx.jpg);"></td></tr>
</table>

图片均是设置在td标签中。

2、文字也是需要写到td标签中间，如下：

<table>
<tr><td>文字</td></tr>
</table>

Answer 3

给span和img都加一个display:inline-block;vertical-align:middle试试看

使用line-height的话，如果多行文字就不好了。。

Answer 4

td样式中加入 line-height:100%;
试试