Question

我正在使用一些CSS类来操作我的验证摘要。目前，我只显示第一个错误。我希望在它的div中对齐这个错误。但是我的垂直对齐属性似乎没有任何效果。我可以看到，当我在Firefox中使用firebug检查元素时它们被应用，但它们不会呈现为垂直对齐（它们位于顶部）。类的其他元素正确呈现。

我的div

<div style ="float: left; max-width: 200px; height: 75px; vertical-align:middle">
    @Html.ValidationSummary(false)
</div>

我的CSS课程

.validation-summary-errors li {
color: #b94a48;
vertical-align: middle;
}

.validation-summary-errors ul li:nth-child(n+2) {
display: none;
}

JSfiddle：http://jsfiddle.net/9ejZz/1/

Answer 1

vertical-align仅适用于<td>等单元格元素或具有css规则的元素display:table-cell

请参阅此示例：http://jsfiddle.net/V9by8/

你应该为你的问题提供一个小问题，我可以帮助你集中精力

<强>更新

使用您的代码http://jsfiddle.net/9ejZz/6/

进行更新

Answer 2

垂直居中的六种方法。选择你的毒药。这个问题每周都会出现一次......

http://www.vanseodesign.com/css/vertical-centering/

行高

<div id="parent">
    <img src="image.png" alt="" />
</div>

#parent {
    line-height: 200px;
}

#parent img {
    vertical-align: middle;
}

表

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

负边距

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

拉伸

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

等填充

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

Floater Div

<div id="parent">
    <div id="floater"></div>
    <div id="child">Content here</div>
</div>

#parent {height: 250px;}

#floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}

#child {
    clear: both;
    height: 100px;
}

将验证摘要文本与CSS垂直对齐

2 个答案: