从我在更广泛的网络和此处进行的搜索来看,这个问题似乎被问了很多次,但在过去的几周里,我一直没能找到符合我要求的答案。
我在 blogger.com 上使用第三方(付费)响应式模板。
我正在创建一个需要有 html 表格的新页面(不是帖子)。
每个新行的第一个单元格将包含一个始终具有相同大小的图像。
我希望这张图片在垂直和水平方向上都居中,我需要移除图片周围的白色边框。
我知道基本的 html 和一些 CSS,但是对于博客模板,css 往往在 html 中(据我所知)。
这是我的代码:
<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style>
<br />
<table border="2" bordercolor="#0033FF" cellpadding="5" cellspacing="0" style="background-color: #99ffff; border-collapse: collapse; width: 100%;"><tbody>
<tr style="background-color: #0033ff; color: white; padding-bottom: 4px; padding-top: 5px;">
<th width="15%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 1</span></th> <!-- COLUMN NAME 1 -->
<th width="20%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 2</span></th> <!-- COLUMN NAME 2 -->
<th width="20%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 3</span></th> <!-- COLUMN NAME 3 -->
<th width="20%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 4</span></th> <!-- COLUMN NAME 4 -->
<th width="25%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 5</span></th> <!-- COLUMN NAME 5 -->
</tr>
<tr class="alt">
<td><div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://imageshack.com/a/img661/6216/lOGXW9.jpg" /></div>
<br /></td>
<td>Table Cell A2</td>
<td>Table Cell A3</td>
<td>Table Cell A4</td>
<td>Table Cell A5</td>
</tr>
<tr>
<td>Table Cell B1</td>
<td>Table Cell B2</td>
<td>Table Cell B3</td>
<td>Table Cell B4</td>
<td>Table Cell B5</td>
</tr>
<tr class="alt">
<td>Table Cell C1</td>
<td>Table Cell C2</td>
<td>Table Cell C3</td>
<td>Table Cell C4</td>
<td>Table Cell C5</td>
</tr>
<tr>
<td>Table Cell D1</td>
<td>Table Cell D2</td>
<td>Table Cell D3</td>
<td>Table Cell D4</td>
<td>Table Cell D5</td>
</tr>
</tbody></table>
作为帮助其他遇到我问题的人的脚注,我已经通过执行以下操作解决了它。
将此添加到主博客 css 以摆脱白色边框:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0 !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
然后使用它来居中图像:
<td align="center" valign="center"><img src="*image url*;" /></td>
希望对其他人有帮助
最佳答案
我建议将 cellpadding 属性设置为零。
关于css - 删除 html 表格单元格中的白色边框和垂直/水平图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27950898/