为什么这个css垂直对齐不起作用[重复]答案

【问题标题】：Why is this css vertical-align not working [duplicate]为什么这个css垂直对齐不起作用[重复]
【发布时间】：2014-02-21 00:37:11
【问题描述】：

Here 是我的代码。

我在div 中添加了spans 的vertical-align 属性和ed_button 类，但third, fourth 和fifth boxes 显示的跨度不在中间的顶部位置.

我在这里做错了吗？

【问题讨论】：

jsfiddle.net/VY7rc/6这是你想要的吗？
这肯定会帮助你stackoverflow.com/questions/16629561/…
@AmarnathBalasubramanian：我希望所有 div 的宽度都相同。
@ThankYouSRT 检查此fiddle
@ThankYouSRT 我已经发布了一个答案，请您检查一下并告诉我是否正确？

标签： html css vertical-alignment styling

【解决方案1】：

你需要给outer-div display: table。 float: left 将满足您水平对齐的目的。

.ed_button{
    display: table;
    float: left;
    margin-right: 3px;
}

inner-div 应该有display: table-cell

.ed_button span{
    display: table-cell;
    vertical-align: middle;
}

在此处查看 DEMO。

【讨论】：

为伟大的努力点赞

【解决方案2】：

vertical-align 属性适用于 table 或 table-cell

JSFiddle

【讨论】：

整个格式已经改变
@AmarnathBalasubramanian 也许但我已经给了 OP 为什么垂直对齐不起作用的答案。我不确定格式
但是他需要输出，说明理由也可以由菜鸟完成，而不是你为什么不帮助他得到他的答案

【解决方案3】：

因为你有固定的尺寸，我建议从多行中删除span，而是使用line-height = div 高度技巧来处理单行文本

.ed_button span {
    vertical-align: middle;
    height: auto;
    line-height:40px;
}

demo

【讨论】：

【解决方案4】：

我已将其添加到 CSS 部分

.ed_button {     
 display: table-cell;
 vertical-align: middle;
 border-right: 5px #FFFFFF solid;
}

`Working Fiddle`

【讨论】：

如果背景颜色是白色就可以，如果有背景图片呢？

【解决方案5】：

.ed_button{
    background-color: #F9A11A;
    clear: both;
    float: left;
    font-size: 14px;
    height: 40px;
    margin-bottom: 10px;
    text-align: center;
    width: 120px;
        }

为您的代码使用这种 css 样式，它会正常工作

【讨论】：

【解决方案6】：

您的所有文字都没有居中对齐。只是因为第一个和第二个框中的文本更多，它似乎在中间。

您也可以尝试 css 的 padding-top、margin-top 或 Position 属性。

【讨论】：