Html 桌子旁边的垂直中心DIV

我无法将一个DIV放在DIV内的一张桌子旁边。 我已经将DIV和表的样式设置为inline block，并相应地设置为inline，但实际情况是DIV被放置在表的底部，而不是表的中间层（目标是将其在“6”和“24”之间对齐）。要求it使用响应的格式

下面是我在JSFIDLE中编写的代码

<div class="Dboxes" style="color:white;">
<span class="Title"> Title </span><br>
<span class="Value" style="display:inline-block; background:orange;"> <img id="PPMain" class="MainImg" src="img/grnsqr.png" /> ## </span>

<table style="display: inline-block; background:green;">
    <tr>
        <td>2</td>
        <td>
            <img id="PPVal2" class="ValImg" src="img/grnsqr.png">xx</td>
    </tr>
    <tr>
        <td>6</td>
        <td>
            <img id="PPVal6" class="ValImg" src="img/grnsqr.png">yy</td>
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img id="PPVal24" class="ValImg" src="img/grnsqr.png">zz</td>
    </tr>
    <tr>
        <td>##</td>
        <td>
            <img id="PPVal##" class="ValImg" src="img/grnsqr.png">aa</td>
    </tr>
</table>

</div>

标题

## 
2.
xx
6.
yy
24
zz
##
aa

非常感谢您的帮助，非常感谢

---

另外，link就在这里

您可能需要使用div将内容放入两列，浮动它们，然后使用填充将内容向下移动到您想要的位置

像这样

div.col{
宽度：45%；
浮动：左；
}
第一分区{
宽度：70px；
填充顶部：40px；
}
标题

## 
2.
xx
6.
yy
24
zz
##
aa

这是否回答了您的问题

顺便说一句，将

表

设置为

显示：内联块

可能是个坏主意

.container {
  display: flex;
  align-items: center;
}
    <div class="container">
<table style="display: inline-block; background:green;">
    <tr>
        <td>2</td>
        <td>
            <img id="PPVal2" class="ValImg" src="img/grnsqr.png">xx</td>
    </tr>
    <tr>
        <td>6</td>
        <td>
            <img id="PPVal6" class="ValImg" src="img/grnsqr.png">yy</td>
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img id="PPVal24" class="ValImg" src="img/grnsqr.png">zz</td>
    </tr>
    <tr>
        <td>##</td>
        <td>
            <img id="PPVal##" class="ValImg" src="img/grnsqr.png">aa</td>
    </tr>
</table>
  <div class="other-div">
    <h1>Hey There!</h1>
  </div>
</div>

.container{
显示器：flex；
对齐项目：居中；
}
2.
xx
6.
yy
24
zz
##
aa
嘿！

将第3行更改为以下内容：

并将第5行更改为以下内容：

瞧！：）

---

您可以尝试将这两个对象嵌套在一个外部表中，然后像这样删除边框（我还使内部表具有一个类，并在CSS中表示该类以代替原始的“表”CSS）：

---

我在这里只看到一个div。谢谢，这就是我要找的。请你再解释一下显示器：flex；并对齐项目：居中？

.container {
  display: flex;
  align-items: center;
}
    <div class="container">
<table style="display: inline-block; background:green;">
    <tr>
        <td>2</td>
        <td>
            <img id="PPVal2" class="ValImg" src="img/grnsqr.png">xx</td>
    </tr>
    <tr>
        <td>6</td>
        <td>
            <img id="PPVal6" class="ValImg" src="img/grnsqr.png">yy</td>
    </tr>
    <tr>
        <td>24</td>
        <td>
            <img id="PPVal24" class="ValImg" src="img/grnsqr.png">zz</td>
    </tr>
    <tr>
        <td>##</td>
        <td>
            <img id="PPVal##" class="ValImg" src="img/grnsqr.png">aa</td>
    </tr>
</table>
  <div class="other-div">
    <h1>Hey There!</h1>
  </div>
</div>

.Outer
{
   border-collapse:collapse;
} 

.Outer td {
     border: none;
    outline: none;
}