html - 对齐网页页眉中的组件

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

最简单的方法是使用 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>