0

スパン、ラベル、ボタンを含む Web ページの右上に div 要素を設定しようとしています。すべての要素を垂直方向の高さ (できれば div 要素の中央) に揃えたいと考えています。ただし、要素が div の上部にしがみついているため、vertical-align: middle は機能しません。それらはおそらく外部の 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

vertical-align の目的を誤解しています。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 に答える