【问题标题】:Angular 2 Material - How To Center Progress SpinnerAngular 2 Material - 如何居中进度微调器
【发布时间】:2017-05-14 06:34:32
【问题描述】:

我已经从下面的链接实现了 Angular 2 进度微调器

https://github.com/angular/material2/tree/master/src/lib/progress-spinner

我想让它居中,但是,我似乎让它工作的唯一方法是删除

display: block 

来自 CSS。但是,这会导致微调器在页面上显得很大。

任何建议都会很棒。

【问题讨论】:

    标签: css angular angular2-material


    【解决方案1】:

    只需添加边距规则:

    <md-progress-spinner style="margin:0 auto;" 
                         mode="indeterminate"></md-progress-spinner>
    

    plunker:http://plnkr.co/edit/sEiTZt830ZE7rqjq9YXO?p=preview

    更新

    只是想分享和演示其他 4 种通用定心解决方案

    • 灵活:

    .wrapper {
      display: flex; 
      justify-content: center; 
      align-items: center;
      height: calc(100vh - 20px);
      background: red;
    }
    .inner {
      background: green;
      color: white;
      padding: 12px;
    }
    <div class="wrapper">
      <div class="inner">INNER CONTENT</div>
    </div>
    • 网格:

    .wrapper {
      display: grid; 
      place-items: center;
      height: calc(100vh - 20px);
      background: red;
    }
    .inner {
      background: green;
      color: white;
      padding: 12px;
    }
    <div class="wrapper">
      <div class="inner">INNER CONTENT</div>
    </div>
    • 相同的高度和行高 + 文本对齐

    .wrapper {
      line-height: calc(100vh - 20px);
      height: calc(100vh - 20px);
      text-align: center;
      background: red;
    }
    .inner {
      background: green;
      color: white;
      padding: 12px;
      display: inline;
    }
    <div class="wrapper">
      <div class="inner">INNER CONTENT</div>
    </div>
    • 使用 ABSOLUTE、TOP、LEFT 和 TRANSFORM TRANSLATE

    .wrapper {
      height: calc(100vh - 20px);
      background: red;
      position: relative;
    }
    .inner {
      background: green;
      color: white;
      padding: 12px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    <div class="wrapper">
      <div class="inner">INNER CONTENT</div>
    </div>

    【讨论】:

    • 这个有效。我在 CSS 方面不是很擅长,但你如何使用 flexbox 来实现这一点?
    • 您可以通过添加带有 style="display: flex; justify-content: center; align-items: center;" 的包装器 div 来居中任何元素。您可以在the-echoplex.net/flexyboxes 练习 flex
    • 或使用 css: mat-spinner { margin: 0 auto; }
    【解决方案2】:

    这个 CodePen 帮助我在 Angular 4 中使用 Material Design 创建了一个以页面为中心的微调器:https://codepen.io/MattIn4D/pen/LiKFC

    组件.html:

    <div class="loading-indicator">
      <mat-progress-spinner mode="indeterminate" color="accent"></mat-progress-spinner>
    </div>
    

    组件.css:

    /* Absolute Center Spinner */
    .loading-indicator {
      position: fixed;
      z-index: 999;
      height: 2em;
      width: 2em;
      overflow: show;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    
    /* Transparent Overlay */
    .loading-indicator:before {
      content: '';
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.3);
    }
    

    【讨论】:

    • 第一个解决方案不是垂直居中,但您的解决方案非常适合它。非常感谢。
    【解决方案3】:

    我使用 angular 6 和材料 2+ 并使用了那个 CSS 代码:

    .mat-spinner {
        position: relative;
        margin-left: 50%;
        margin-right: 50%;
    }
    

    【讨论】:

    • 您也不必说margin-right: 50%。你只需要使用margin-left: 50%
    • @Corné 那你应该transform: translateX(-50%),否则它不会完全居中。
    【解决方案4】:

    除非在父元素中设置高度,否则第一个答案不起作用。

    我使用 fxFlex 修复了它

    <div fxLayout="row" fxLayoutAlign="space-around center" style="height:100%">
            <mat-spinner diameter="50" strokeWidth="5"></mat-spinner>
    </div>
    

    【讨论】:

    • 似乎唯一需要的是fxLayoutAlign="center"
    【解决方案5】:

    你也可以使用网格:

    .wrapper {
      display: grid; 
      place-content: center; 
      height: calc(100vh - 20px);
      background: red;
    }
    

    【讨论】:

      【解决方案6】:

      来源Angular Wiki

      对我来说,这是最好的:

      组件:

      <div class="center">
          <mat-spinner> </mat-spinner>
      </div>
      

      文字:

      /** Can be used to center any element */
      .center {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2021-07-06
        • 2019-05-16
        • 1970-01-01
        • 2019-07-12
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-01-04
        相关资源
        最近更新 更多