垂直对齐格式为表格单元格的文本以格式化为表格单元格

在我的移动主题中，我一直使用我的表格的CSS来使信息更清晰，更易于我的用户理解。垂直对齐格式为表格单元格的文本以格式化为表格单元格

在第1列中我有一个网络标志，第2列我有我已经格式化为（display：table-cell）的文本，并给它们一个1px的边框。

问题是我无法让它们垂直对齐，我附上了一张图片以准确显示我的意思。

正如其在一列的图像当我第一次插入它在那里它被搞砸了，所以我这样做的CSS，试图将其调整到相邻文本的单元格。

HTML

<td class="network-cell"> 
<center><img alt="EE" src="/wp-content/themes/wootique-child/images/network-logos/ee-logo.png" class="network-logo"></center>      
</td>

CSS

.network-logo { 
    min-height: 30px; 
    min-width: 30px; 
    position: relative; 
    top: 5px !important; 
} 

.network-cell > center { 
    border-bottom: 1px solid gainsboro; 
    border-right: 1px solid gainsboro; 
    border-top: 1px solid gainsboro; 
    height: 39px; 
    position: relative; 
    top: 5px; 
    width: 100%; 
}

相邻的单元格的格式不同，因为它们不包含图像。

例如。

HTML

<td> 
<p id="minutes" align="center">300</p> 
</td>

CSS

#minutes, #texts, #data, #infinity { 
    background-color: ghostwhite; 
    border-color: gainsboro; 
    border-style: solid; 
    border-width: 1px; 
    color: black !important; 
    font-size: 13px; 
    font-weight: normal; 
    line-height: 3em; 
    padding-left: 1px; 
    padding-right: 1px; 
    width: 100%; 
}

我怎样才能让第1列的边框正好对齐列2,3 + 4的边界？

我知道我需要将这些更改为类 - 查看问题滚动到网站的底部，并选择查看移动版本。

http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-j1-white-deals/

这个问题的方式比你强调它是的，规则是不同的重复的问题比较复杂，我们正在谈论对准格式化为表格单元对象不是表细胞本身！

来源

2016-06-07 Scott

很好...就此。 '：）'和男人，你的网站在100Mbps的连接上速度很慢。仔细检查？ –

我需要升级托管它的共享atm产品数据库约50,000 lol – Scott

放弃。您正在使用'

'和其他已弃用的标签，并且'vertical-align'使用了错误。我可以为没有表格的盒子提供替代代码吗？ –

尝试每个违规元素上的border-collapse: collapse。我相信这将是<center>和<img>。 border-spacing: 0也可能有用。请记住，您的metro样式表会重置border-collapse: separate，因此可以使用!important将这些样式放入<style>块中，或者使用内联或更好的方式将类分配给类。

来源

2016-06-07 19:02:23 zer00ne

将id=全部替换为class=，因为id不应该重复。只是删除<tbody>结构那里，替换为以下：

.row {font-family: 'Open Sans', 'Segoe UI', sans-serif; font-size: 10pt;} 
 
.row > div {display: inline-block; vertical-align: middle; height: 40px; background: #f5f5f5; border: 1px solid #ccc; line-height: 40px; padding: 0 10px;} 
 
.row .network-cell {background: #fff; padding: 0;} 
 
.row img {display: inline-block; line-height: 1; vertical-align: middle;}

<div class="row"> 
 
    <div class="network-cell"> 
 
    <img class="network-logo" src="http://mobilereactor.co.uk//wp-content/themes/wootique-child/images/network-logos/three-logo.png" alt="Three" /> 
 
    </div> 
 
    <div class="minutes">100</div> 
 
    <div class="infinity">unltd*</div> 
 
    <div class="data">500MB</div> 
 
</div>

预览

来源

2016-06-07 19:06:29

我不希望混乱的表体结构，因为我的数据表在后台运行在特定的列和管理过滤器的背景下，这可以做到没有重组？对不起，我不知道你的意思是删除td标签 – Scott

-1

用最小的努力：

.network-cell > center { 
... 
... 
top: 6px; 
... 
... 
}

但是使用表格进行对齐不太好，在这种情况下，使用display：inline-block更好的div，并且标记中心已弃用。

来源

2016-06-08 14:23:58

希望它是那么容易我的朋友大声笑 – Scott

在铬检查员的作品。在Firefox中有 –

那里都不均匀 – Scott

垂直对齐格式为表格单元格的文本以格式化为表格单元格

回答

相关问题