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:
https://i.sstatic.net/ThHgh.png
I am currently attempting to align a glyph icon sourced from https://github.com/dart-lang/angular2_components
What approach should I take in order to center the glyphs?
The css code found in https://github.com/dart-lang/angular2_components/blob/master/lib/src/components/glyph/glyph.scss.css implements flexbox with the property -> display: inline-flex
Although the margin-left method somewhat assists in alignment, it fails to produce satisfactory results when the width is reduced. The following methods were unfruitful:
text-align: center
as well as
align-items: center;
justify-content: center;
and finally
display:block;
margin:auto;