将格式化为表格单元格的图像垂直对齐到格式化为表格单元格的文本

Question

在我的移动主题中，我一直在玩桌面的CSS，以便让我的用户更清楚，更容易理解信息。

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

问题是我无法让它们完全垂直对齐我已附上图像以向您显示我的意思。

http://pasteboard.co/1vII00Yg.png

当我第一次将它插入那里时，第一列中的图像被搞砸了，所以我在CSS中尝试将它与相邻的文本单元对齐。

HTML

.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%;
}

CSS

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

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

例如。

HTML

#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%;
}

CSS

var numOfString = 0;
var feed = ["testABC", "test", "testABC"];
for(let currentString of feed) {
  if(currentString.indexOf('testABC') !== -1) {
    numOfString += 1;
  }
}
console.log(numOfString);

如何使第1列的边框与第2,3 + 4列的边框完全对齐？

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

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

  

这个问题比你强调的问题更复杂   作为重复，规则是不同的，我们正在谈论   对齐格式化为表格单元格的对象而不是表格单元格本身！

Answer 1

将所有id=替换为class=，因为id不应该重复。只需删除那里的<tbody>结构，然后替换为以下内容：

＆＃13;

＆＃13;

.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

预览

Answer 2

在每个违规元素上尝试border-collapse: collapse。我相信这将是<center>和<img>。 border-spacing: 0也可能有用。请注意，您的都市样式表会重置border-collapse: separate，因此要么将样式放在<style>块!important中，要么使用内联，或者更好地分配类。

Answer 3

用最少的努力：

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

但是使用table进行对齐并不是那么好，在这种情况下使用display：inline-block更好的div，并且不推荐使用tag中心。