Align icon with text vertically

Asked

Viewed 2,772 times

4

How do I align the icon with the text?

.material-icons {
    width: 24px;
    overflow: hidden;
}
.material-icons.tiny { 
    font-size: 1rem;
    width: 1rem;
    overflow: hidden;
}
.material-icons.small { 
    font-size: 2rem; 
    width: 2rem;
    overflow: hidden;
}
.material-icons.medium { 
    font-size: 4rem; 
    width: 4rem;
    overflow: hidden;
}
.material-icons.large { 
    font-size: 6rem; 
    width: 6rem;
    overflow: hidden;
}
.material-icons.extra-large { 
    font-size: 10rem; 
    width: 10rem;
    overflow: hidden;
}
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<h1><i class="material-icons medium">error</i>Ops...</h1>

css

1 answer

6


Use vertical-align: middle;.

Note: something important, the property vertical-align only works with elements whose value display be it inline or inline-block, when to use float or block the vertical-align will have no effect as it is used for elements that have "inline behavior".

Your CSS should look like this:

.material-icons {
    width: 24px;
    overflow: hidden;
    vertical-align: middle;
}
.material-icons.tiny { 
    font-size: 1rem;
    width: 1rem;
    overflow: hidden;
}
.material-icons.small { 
    font-size: 2rem; 
    width: 2rem;
    overflow: hidden;
}
.material-icons.medium { 
    font-size: 4rem; 
    width: 4rem;
    overflow: hidden;
}
.material-icons.large { 
    font-size: 6rem; 
    width: 6rem;
    overflow: hidden;
}
.material-icons.extra-large { 
    font-size: 10rem; 
    width: 10rem;
    overflow: hidden;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<h1><i class="material-icons medium">error</i>Ops...</h1>

  • 1

    vlw, thank you. that’s right

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.