在材料设计中水平对齐元素

Posted 2023-02-22

【中文标题】在材料设计中水平对齐元素

【英文标题】：horizontally align elements in material design

【发布时间】：2016-03-01 06:48:26

【问题描述】：

我有一个包含两个组件的简单工具栏：一个 h1 和一个菜单按钮。我希望 h1 居中在工具栏和左侧的菜单按钮。在玩弄了材料设计属性之后，我仍然无法实现我的最终目标。我需要编写自定义 CSS 吗？这是我现在的索引html

<md-toolbar layout="row" layout-align='start center'>
            <md-button class="md-icon-button md-primary" aria-label="Settings" flex='10'>
                <i class='material-icons md-36 md-light'>menu</i>
            </md-button>
            <h1 class='title' flex='90'>MusiComp</h1>
        </md-toolbar>

【问题讨论】：

没有 flexbox 方法（或其他 CSS 布局）可以使元素居中但忽略另一个元素的大小除了绝对定位。您必须绝对定位按钮，以便 h1.. 忽略它的大小，然后它可以是 100% 宽。

这正是我所期望的，但不确定是否有一种新的、创造性的方式来实现这一点。谢谢你，保利。

【参考方案1】：

你可以玩<div class="mdl-layout-spacer"></div>。尝试在您的 <h1 class='title' flex='90'>MusiComp</h1> 之前添加此内容