user4756836 user4756836 - 1 month ago 11
CSS Question

Angular Material css aligning issue

Currently, when the browser's width become smaller... my icons end up floating to the left.

enter image description here

How can I have them centered horizontally? Any help will be appreciated.

HTML:

<div ng-app="sandbox">
<div layout="column" layout-fill>
<div class="flexbox-parent">
<div layout="row" layout-align="center center" style="height: 600px;">
<div id="icons">
<i class="fa fa-facebook fa-5x circle-icon"></i>
<i class="fa fa-facebook fa-5x circle-icon"></i>
<i class="fa fa-facebook fa-5x circle-icon"></i>
</div>
</div>
</div>
</div>
</div>


CSS:

#icons i {
color: #fff;
margin-left: 10px;
margin-right: 10px;
}

.circle-icon {
background: #3b5998;
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
line-height: 100px;
vertical-align: middle;
padding: 30px;
}


I have tried using
layout-align="center center"
on
#icons


JSFiddle Demo

Answer

I'm not sure if there is a Angular Material class for that, but you can achieve this by manually setting text-align: center on your wrapper. In four example you'd go like this:

#icons {
  text-align: center;
}

Fiddle