如何相对于该div垂直居中div两侧的两个跨度？

Question

现在，它基本上是这样的：

_______________________________________
|                                     |
|             ___________             |
|             |         |             |
|      ______ |   div   | ______      |
|      |span| |         | |span|      |
|      |____| |_________| |____|      |
|_____________________________________|

我希望它看起来像这样：

_______________________________________
|                                     |
|             ___________             |
|      ______ |         | ______      |
|      |span| |   div   | |span|      |
|      |____| |         | |____|      |
|             |_________|             |
|_____________________________________|

Answer 1

Flexbox 可以执行https://jsfiddle.net/2Lzo9vfc/220/

<强> CSS

.content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.content div, 
.content span {
    padding: 50px;
    border: 1px solid black;
}

.content div {
    height: 300px;
    line-height: 300px;
    padding: 0 50px;
}

<强> HTML

<div class="content">
    <span>Span 1</span>
    <div>Div </div>
    <span>Span 2</span>
</div>

Answer 2

需要查看您的代码以更具体地回答这个问题，但尝试类似这样的

<div style="display:table-cell; vertical-align:middle"> ... </div>

如果你将div和span放在一个表中，那么你可以简单地将valign =“middle”添加到TD。

Answer 3

我建议您使用display:tablecell然后使用vertical-align:middle作为您的div。我对html相当新，所以我可能错了。