在表格单元格内的两个图像之间放置一个 Div答案

【问题标题】：Placing a Div between two Images inside a table cell在表格单元格内的两个图像之间放置一个 Div
【发布时间】：2020-01-02 04:46:30
【问题描述】：

我正在创建一个联赛表，我想在每个结果的左侧和右侧包含每个团队的徽标（示例如下）。

我一直在尝试使用 float:right 和 left，但它没有按预期工作。

HTML：

<table border=2> 
    <tr>
      <th>Local Team</th>
      <th>Result</th>
      <th>Away Team</th>
    </tr>
    <tr>
      <td>Team 1</td>
      <td><img class="photoL" src="https://cdn0.iconfinder.com/data/icons/cup/154/football-shield-club-sport-512.png" alt="" /><div class="result">0 - 0 </div><img class="photoR" src="https://cdn0.iconfinder.com/data/icons/cup/154/football-shield-club-sport-512.png" alt="" /></td>
      <td>Team 2</td>
    </tr>
</table>

CSS：

.photoL {
  max-width: 66px;
  height: 40px;
  float: left;
  margin: 0px 0px 5px 0px !important;
}

.photoR {
  max-width: 66px;
  height: 40px;
  float: right;
  margin: 0px 0px 5px 0px !important;
}

.result {
}

我正在寻找的结果是：[IMG1] 0 - 0 [IMG2] 都在 td 内的同一行中。

【问题讨论】：

标签： html css image html-table

【解决方案1】：

这是一种方法。删除浮动，只需将“结果”DIV 替换为 SPAN 以使这些项目与图像内联。

.photoL {
max-width: 66px;
height: 40px;

}

.photoR {
max-width: 66px;
height: 40px;

}

.result {
height: 40px;
line-height: 40px;
} 

img{
vertical-align: middle;
}

这里是html：

<table border=2> 
  <tr>
    <th>Local Team</th>
    <th>Result</th>
    <th>Away Team</th>
  </tr>

  <tr>
    <td>Team 1</td>
    <td><img class="photoL" src="https://cdn0.iconfinder.com/data/icons/cup/154/football-shield-club-sport-512.png" alt="" />
<span class="result">0 - 0 </span><img class="photoR" src="https://cdn0.iconfinder.com/data/icons/cup/154/football-shield-club-sport-512.png" alt="" /></td>
    <td>Team 2</td>
  </tr>
</table>

【讨论】：

这很接近，但它没有垂直居中，vertical-align 也不在那里工作......
你没有要求它垂直居中。
完美！谢谢你:)

【解决方案2】：

您可以使用 Flex 之类的工具来实现此目的。详细了解 flex here

您可以根据自己的喜好修改下面的代码。

<!DOCTYPE html>
<html>
<head>
<style>
table{
    width: 100%;
}
tr {
  display: flex;
  background-color: DodgerBlue;
}

tr > th {
  background-color: #f1f1f1;
  width: 33.33%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-direction Property</h1>

<p>The "flex-direction: row-reverse;" stacks the flex items horizontally (but from right to left):</p>

<table>
<tr class="flex-container">
  <th>1</th>
  <th>2</th>
  <th>3</th>  
</tr>
</table>

</body>
</html>

希望这会有所帮助！

【讨论】：