Question

Here是我的代码。

我已添加vertical-align spans div属性ed_button third,类fourth fifth boxes和{{{1}} 1}}在顶部位置显示跨距不在中间。

我在这里做错了吗？

Answer 1

您需要提供outer-div display: table。 float: left将实现您的水平对齐目的。

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

并且内部div应该有display: table-cell

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

在此处查看 DEMO 。

Answer 2

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

JSFiddle

Answer 3

因为你有固定的维度，我建议从多行删除span，而是使用line-height = div高度技巧来表示单行文字

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

demo

Answer 4

我已将此添加到CSS部件

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

`Working Fiddle`

Answer 5

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

将此css样式用于您的代码，它将正常工作

Answer 6

你的文字都没有在中间分配。只是因为在第1和第2个框中有更多文本似乎在中间。

您还可以尝试使用css的padding-top，margin-top或Position属性。

为什么这个css vertical-align不起作用

6 个答案:

`Working Fiddle`