目录
1如何将表格同一单元格中的图片和文本框对齐? 3
2如何将已设置了的单行表格中图片与其底部对齐? 3
3如何将表格的边框看起来只有1px宽? 3
4如何将插入的图片和边框有一段距离? 3
1如何将表格同一单元格中的图片和文本框对齐?
Key:
分别在图片和文本框的input属性中加入如下代码:
style="vertical-align:middle"
编写完成后的代码示例:
<input name="btnChoose" type="image" id="btnChoose" src="http://www.cnblogs.com/Skin/Default/Images/btnChoice.jpg" style="vertical-align:middle"/>
<input name="txtPrincipaler" type="text" id="txtPrincipaler" style="vertical-align:middle" />
2如何将已设置了的单行表格中图片与其底部对齐?
单击表格,查看表格属性,确认填充为0px后
在图片所在的单元格加上如下代码:
valign="bottom"
在图片的属性中加入如下代码:
align="absbottom"
编写完成后的代码示例:
<td valign="bottom" class="table_title"> <img src="http://www.cnblogs.com/Skin/Default/Images/lblCategoryAdd.gif" width="94" height="27" align="absbottom" /></td>
3如何将表格的边框看起来只有1px宽?
首先设置两个样式:.table和.td
在.table中设置背景色为边框的颜色,同时确认表格属性中的边框间距为1;为表格选择.table样式
在.td中设置背景色为白色(或者其他你想要的颜色),选择表格中所有单元格为其选择样式.td
即可得到表格的边框为1px
4如何将插入的图片和边框有一段距离?
方法一:
在图片的属性中加入如下代码:
margin-left:14px;(left可换成right/top/bottom)
编写后的代码示例:
<img src="http://www.cnblogs.com/Skin/Default/Images/imgSuccess.gif" width="110" height="110" style="background-repeat:no-repeat; vertical-align:middle; margin-left:14px;" />
方法二:
在photoshop中编辑该图像,使图像距离画布的边框有任意距离(任意:你想要的距离),编辑完成之后存储该图像并替换原图,即可得到你想要的效果