角度材料弯曲中心和右对齐

Posted 2023-03-06

【中文标题】角度材料弯曲中心和右对齐

【英文标题】：angular material flex center and right align

【发布时间】：2019-01-31 00:50:39

【问题描述】：

我正在使用 angular flexbox 创建页脚。 在中间我有一些信息，在右侧我有一个徽标。 现在信息应该在整个页面居中，并且徽标应该向右对齐。 到目前为止，这是可行的，但信息集中在它自己的容器内，而不是沿着整个 div。 如何用 flexbox 解决这个问题？ （请没有绝对解决方案，只是弯曲）

<footer fxLayout="row"
fxLayoutAlign="space-between center">
<div class="info" fxFlex>
  <section>
    <span>Straatlaan 48 | 3500 Hasselt</span>
    <span>011 / 58 96 47</span>
    <span>0487 96 54 18</span>
  </section>
  <section>
    <span>KBC BE36 0014 7993 8372</span>
    <span>BTW 123.423.312</span>
    <span><a routerLink="/">Algemene voorwaarden</a></span>
    <span><a routerLink="/">Privacy</a></span>
  </section>
</div>
<div class="logo">
 <img src="assets/img/logo-footer.png"
    >
</div>
</footer>

信息在它自己的 div 内居中，而不是沿整个宽度居中：

【问题讨论】：

你试过align='left'吗？

你建议我在哪里使用这个？我不认为 align 是一个有效的 html5 标签

但这甚至不是有效的css，我不需要向左对齐任何东西？

@Michael_B 我找到了那个特定的答案，但是我找不到适合我的问题的解决方案

我建议，使用自定义类并点击以下链接：***.com/questions/43211390/…

【参考方案1】：

我通过将它包装在一个 div 中来让它工作

<div fxFlexAlign="end">
   <button>...</button>
</div>

【参考方案2】：

.container 
  display: flex;
  justify-content: space-between;

<div class="container">
  <div></div>
  <div>B</div>
  <div>C</div>
</div>