0

我正在尝试在包含跨度、标签和按钮的网页的右上角设置一个 div 元素。我想让所有元素对齐垂直高（最好在 div 元素的中间）。但是 vertical-align: middle 不起作用，因为元素紧贴 div 的顶部。它们可能受到外部 div 或 Panel 的影响（因为我使用 gwt）。我应该干预 gwt 小部件的默认属性吗？您还能建议什么其他解决方案？编码：

<div class="{style.topRightDisplay}">
                <span style="float:left;">Eingeloggt als: </span>
                <g:HTML ui:field="loginHTML" addStyleNames="{style.loginHTML}"></g:HTML>
                <g:Button ui:field="logoutButton" addStyleNames="{style.button}">Logout</g:Button>
            </div>


.button {
        float: right;
        margin-right: 15px;
    }   

.loginHTML {
        float: left;
    }

    .topRightDisplay {
        float: right;
        height: 20px;
        width: 200px;
        vertical-align: middle;
    }
4

1 回答 1

0

您误解了垂直对齐的目的。见MDN上关于vertical-align的解释

您需要将垂直对齐应用于子元素，而不是父元素。在不知道你的标记是什么样子的情况下，我建议这样做：

.topRightDisplay input,
.topRightDisplay button, 
.topRightDisplay span{
   vertical-align: middle;
   display: inline-block;
}

您还应该删除浮动。浮动使项目呈现为块级元素，这意味着垂直对齐不起作用。

相反，您可以使用 display: inline-block。您可能需要更改 hmtl 中元素的顺序以获得所需的结果。

于 2012-06-05T08:19:33.767 回答