Question

从我在更广泛的网络上搜索到这里似乎这是一个问了很多次的问题但是在过去的几周里我找不到能够做到我想要的答案。

我在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>

希望这对其他人有帮助

Answer 1

我建议将cellpadding属性设置为零。

Answer 2

从这些第一个单元格中删除<img>标记以及任何内容。然后，在样式表中：

tr td:first-child {
    padding: 0px;
    background: url("http://imageshack.com/a/img661/6216/lOGXW9.jpg") no-repeat center;
}

如果每个单元格的图像应该不同，则必须单独为每个单元格指定背景属性。

Answer 3

找到更新的JSFIDDLE CODE。

我无法重现白边问题。

使中心垂直和水平对齐。

td{ text-align: center; vertical-align: middle; }

在html表格单元格中删除白色边框和垂直/水平图像

3 个答案: