CODEWITHSUNDEEP
htmlcssmaterial-designmaterialize
cnexans
cnexans

Reputation: 994

Material design icons, how to center them as text?

I've been trying to do some kind of navbar with MaterializeCSS with 3 links, each one of 33% width of the navbar, and I want to center the text inside the links (even the icons)

If I don't put left or right classes, the text and the icon doesn't stay in the same line... But if I put left class to the icon then it floats to the left, therefore given that the navbar is width:100%, the space between the icon and the text is too much.

Here is the HTML

<div id="secondary-navbar"><nav>
  <div class="nav-wrapper">
    <ul>
      <li>
        <a href="#!">
          <i class="material-icons left">event</i>Calendario
        </a>
      </li>
      <li>
        <a href="#!">
          <i class="material-icons left">location_on</i>Mapa
        </a>
      </li>
      <li>
        <a href="#!">
          <i class="material-icons left">apps</i>Galería
        </a>
      </li>
    </ul>
  </div>
</nav></div>

And the CSS

#secondary-navbar nav
{
    background:#ffffff;
}
#secondary-navbar nav .nav-wrapper ul li a
{
    font-size:1.2em;
}
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
    font-size:1.2em;
    margin-right:0.2em;
}
#secondary-navbar nav .nav-wrapper ul li a,
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
    color:#06207d;
}

#secondary-navbar nav .nav-wrapper ul li
{
    width:33%;  
}
#secondary-navbar nav .nav-wrapper ul li:nth-child(3)
{

    width:34%;
}

Here is a jsfiddle, I tried with inline-block to the icon, but then then navbar gets more than 56px height... https://jsfiddle.net/4aednm5d/

Do you have any idea about how to solve this?

Upvotes: 5

Views: 28047

Answers (5)

dessertcook
dessertcook

Reputation: 361

I generally use this:

.icon-align {
       vertical-align: text-bottom;
    }
<i class="material-icons md-18 icon-align">check_circle</i>Auto Accepted</div>`

Upvotes: 13

WasiF
WasiF

Reputation: 28847

When I changed the size of mat-icon in the button, its vertical alignment got bad then I added vertical-align: -webkit-baseline-middle; to the mat-icon and got the actual required result.

Here is how I did improve this ...

<button color="primary" mat-raised-button>
    <mat-icon>edit</mat-icon>
    Edit Profile
</button>

// CSS
mat-icon {
   font-size: 16px;
}

The result, I got mis-alignment of icon and text

enter image description here

then I added vertical-align: -webkit-baseline-middle;

mat-icon {
   font-size: 16px;
   vertical-align: middle;
}

and got the required result

enter image description here

Upvotes: 3

Atanas Beychev
Atanas Beychev

Reputation: 111

Simply use 

.material-icons{
  line-height:59px;
}

This is working https://jsfiddle.net/morfeibox/txs411yk/3/

Upvotes: 0

cnexans
cnexans

Reputation: 994

after trying a lot of things I found the solution. Thank you all, you helped me a lot.

I hope the solution is helpful to another one, you all were right: the way to center the icons as text is text-align:center, but to solve the vertigal-align is the use of span.material-icons and give it a relative position, so we are able to use top:3px for example.

Well here is the pertinent code.

<div class="navbar-fixed" id="secondary-navbar">
    <nav>
        <div class="nav-wrapper">
            <ul>
                <li>
                    <a href="#!">
                        <span class="material-icons">event</span>
                        <span class="nav-text">Calendario</span>
                    </a>
                </li>
                <li>
                    <a href="#!">
                        <span class="material-icons">location_on</span>
                        <span class="nav-text">Mapa</span>
                    </a>
                </li>
                <li>
                    <a href="#!">
                        <span class="material-icons">apps</span>
                        <span class="nav-text">Galería</span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</div>

The CSS

#secondary-navbar nav
{
    background:#ffffff;
}
#secondary-navbar nav .nav-wrapper ul li a .nav-text
{
    font-size:1.2em;
    position:relative;
}
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
    font-size:1.2em;
    margin-right:0.2em;
    position:relative; /* this line and the next "do the thing" */
    top:3px;
}
#secondary-navbar nav .nav-wrapper ul li a
{
    text-align:center; /* this center the text, obv */
    height:56px;
}
#secondary-navbar nav .nav-wrapper ul li a,
#secondary-navbar nav .nav-wrapper ul li a .material-icons
{
    color:#06207d;
}

#secondary-navbar nav .nav-wrapper ul li
{
    width:33%;  
}
#secondary-navbar nav .nav-wrapper ul li:nth-child(3)
{

    width:34%;
}

My best regards

Upvotes: 1

Florin Pop
Florin Pop

Reputation: 5135

Use 

text-align: center;

for aligning text and icons in the center of the parent.

Upvotes: 3

Related Questions