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

Question

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

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

我希望它看起来像这样：

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

Answer 1

需要查看您的代码才能更具体地回答这个问题，但请尝试这样的事情

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

如果您将 div 和跨度放在 table 中，那么您只需将 valign="middle" 添加到 TD。

Answer 2

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 3

我建议您使用 display:tablecell，然后 vertical-align:middle 作为您的 div。不过，我对 html 还很陌生，所以我可能是错的。

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

How can I vertically center two spans on either side of a div, relative to that div?

html

css

alignment