對齊網頁標題中的組件

Question

我想將此html代碼對齊為網頁標題：

<div>
<h1>Web_site_title</h1>

                <h:form>
                    <h:commandLink action="#{logoutController.logout}" value="Preferences"></h:commandLink>
                </h:form>

                <h:selectOneMenu value="#{language.language}" onchange="submit()">
                    <f:selectItem itemValue="en" itemLabel="English" />
                    <f:selectItem itemValue="bg" itemLabel="Български" />
                </h:selectOneMenu>

                <h:form>
                    <h:commandLink action="#{logoutController.logout}" value="Logout"></h:commandLink>
                </h:form>
</div>

我想得到這個視覺效果：

如何對齊補碼？

Answer 1

使用display: flex和justify-content: flex-end將元素向右推， align-items: center以垂直對齊它們。 然后使用margin-right: auto在h1上margin-right: auto將其向左推。

 .flex { display: flex; justify-content: flex-end; align-items: center; } h1 { margin-right: auto; } 

 <div class="flex"> <h1>Web_site_title</h1> <h:form> <h:commandLink action="#{logoutController.logout}" value="Preferences"></h:commandLink>form </h:form> <h:selectOneMenu value="#{language.language}" onchange="submit()"> <f:selectItem itemValue="en" itemLabel="English" /> <f:selectItem itemValue="bg" itemLabel="Български" />select </h:selectOneMenu> <h:form> <h:commandLink action="#{logoutController.logout}" value="Logout"></h:commandLink>form </h:form> </div> 

Answer 2

最簡單的方法是將flex與如下所示的設置一起使用。 h1上的auto margin-right進行左/右分布， align-items: center可用於所有項目的垂直居中。

 .x { display: flex; align-items: center; } .x h1 { margin-right: auto; } 

 <div class="x"> <h1>Web_site_title</h1> <h:form>A <h:commandLink action="#{logoutController.logout}" value="Preferences"></h:commandLink> </h:form> <h:selectOneMenu value="#{language.language}" onchange="submit()">B <f:selectItem itemValue="en" itemLabel="English" /> <f:selectItem itemValue="bg" itemLabel="Български" /> </h:selectOneMenu> <h:form>C <h:commandLink action="#{logoutController.logout}" value="Logout"></h:commandLink> </h:form> </div>