css - gwt-page 中的 Div 垂直对齐

Question

我正在尝试在网页的右上角设置一个 div 元素，其中包含一个跨度、一个标签和一个按钮。我想让所有元素在垂直高度上对齐(最好在 div 元素的中间)。然而 vertical-align: middle 不起作用，因为元素紧贴 div 的顶部。它们可能受外部 div 或面板的影响(因为我使用 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;
    }

Answer 1

你误解了垂直对齐的目的。查看explanation of vertical-align on MDN

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

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

您还应该删除 float 。 float 使元素呈现为 block 级元素，这意味着垂直对齐将不起作用。

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