Search code examples
htmlcssangulardartangular2-material

Css Angular 2 material components for dart. How do I center a glyph?

HTML:

<div class="border">
    <glyph  class="center" [icon]="'star'" ></glyph>

    <div class="centerText">
        This Is Text that is centered.
    </div>
</div>

Css:

.centerText{
    text-align: center;

}

.border{
    border: solid black;
    width: 80px;
}

.center{
    margin-left: 50%;
}

Result:

enter image description here

I am trying to center a glyph icon from https://github.com/dart-lang/angular2_components

How do I center the glyphs?

In https://github.com/dart-lang/angular2_components/blob/master/lib/src/components/glyph/glyph.scss.css the code uses a flexbox in the css -> display: inline-flex

The margin-left is sort of centering it, but it looks bad when the width is smaller. There are things that did not work:

text-align: center

and

align-items: center;
justify-content: center;

and

display:block;
margin:auto;
Solution

  • This works per micronyks suggestion:

    <div class="border">
    <div class="centerText">
        <glyph [icon]="'star'" ></glyph>
    </div>
    <div class="centerText">
        This Is Text that is centered.
    </div>
</div>