Question

我正在尝试在网页的右上角设置一个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;
    }

Answer 1

你误解了vertical-align的目的。请参阅explanation of vertical-align on MDN

您需要对子元素应用vertical-align，而不是父元素。在不知道你的标记是什么样的情况下，我建议：

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

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

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

在gwt页面中垂直对齐

1 个答案: