Question

我的css样式有问题：我有不同的组（<div>），其中子组显示在一个列中或多个（最多3个）列。

我遇到的问题是，我的vertical-align不能在高度为100％的浮点元素中工作。
在子组内：ST200 | Überblick... | EN DE应显示为vertical-align: middle

也许有人可以帮助我在jfiddle上发布的完整代码

Answer 1

Vertical-Align属性仅适用于内联块和内联块元素。如果浮动任何元素，默认情况下元素显示属性值更改为块。在你的情况下，这就是为什么垂直对齐不适用于浮动元素。您的问题的一个解决方案是使用内联。

[Inline-block demo](http://jsfiddle.net/Mostwanted_cJ/W8nf8)

您的JSFiddle已编辑。将所有跨度更改为div并应用display：inline-block和vertical-align：middle

Inline-block demo

Answer 2

Andres的评论here似乎解决了您的问题：文本的line-height将其限制在比其容器div更小的区域。

为了测试，我将line-height上的.kursid属性更改为35px，并且ST200成功地垂直居中，但仅适用于高度为35px的div。对于更通用的解决方案，您可以重新设计代码，以便line-height和height在所有div上显式相等，并且您希望文本垂直居中，或者您可以看到该问题的其他答案其他选择。

Answer 3

我发现我的问题的解决方案非常好用;）

我只需要设置：

.kurs {
    border-radius: 15px 15px 15px 15px;
    background-color: #c5c5c5;
    width: 100%;
    min-height: 35px;
    margin-bottom: 10px;
    display: flex;
    ! display: -webkit-flex; <- remove
    ! display: -moz-box;     <- remove
    align-items: center;     <- add
    justify-content: center; <- add
}

更新的小提琴;）
http://jsfiddle.net/ZAa33/9/

css垂直对齐浮动和高度100％

3 个答案: