table 旁边的垂直居中 DIV

Question

我无法在 DIV 中将 DIV 置于 table 旁边的中心位置。我已将 DIV 和 table 的样式设置为内联块并相应地内联，但是发生的是 DIV 被放置在 table 的底部中心 - table 的水平（目标是将其对齐在“6”和“24”之间）。要求是它与响应式格式一起工作。

这是我在 JSFiddle 中编写的代码。

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

非常感谢帮助，非常感谢

此外，link就在这里https://jsfiddle.net/k3388j0w/1/

Answer 1

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

像这样https://jsfiddle.net/d5u712hv/

div.col {
    width: 45%;
    float: left;
}

div.col.first {
    width: 70px;
    padding-top: 40px;
}
<div class="col first">
    <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>
</div>

<div class="col">
    <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>

Answer 2

这是否回答了您的问题？

http://codepen.io/mwvanmeurs/pen/GpwMZr

顺便说一句，将 table 设置为 display: inline-block 可能不是一个好主意。

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

Answer 3

将第 3 行更改为以下内容： <div class="Value" style="display:inline-block; background:orange; vertical-align:middle">

并将第 5 行更改为以下内容： <table style="display: inline-block; background:green; vertical-align:middle">

瞧！ :)

https://jsfiddle.net/k3388j0w/1/

Answer 4

您可以尝试将两个对象嵌套在外部 table 内，并像这样删除边框（我还使内部 table 具有 class，并表示 class中的CSS代替原来的"table"CSS):

.Outer
{
   border-collapse:collapse;
} 

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

JSFiddle

table 旁边的垂直居中 DIV

Vertical-Center DIV next to a table

html

css

vertical-alignment

jsfiddle