CODEWITHSUNDEEP
cssiconsmaterial-design
Nalaka Gamage
Nalaka Gamage

Reputation: 19

text align center together with google icons

I have google icon with texts. I need to center align my text so that it look good with icon. I tried css vertical align and did not work. Can any one help me align center my texts.

<html>
  <head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <p style="vertical-align: middle">yyyy<i class='material-icons'>clear</i>yyyy</p>
  </body>
</html>

Upvotes: 0

Views: 2583

Answers (1)

UncaughtTypeError
UncaughtTypeError

Reputation: 8712

Declare the vertical-align property to the icon instead (since it is already display: inline-block), e.g:

<i class="material-icons" style="vertical-align: middle">clear</i>

Or wrap the text in inline elements you can style to align vertically with the icon,e.g:

<span style="vertical-align: top">yyyy</span><i class="material-icons">clear</i><span style="vertical-align: top">yyyy</span>

Code Snippet Demonstration:

<html>
  <head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <p>yyyy<i class="material-icons" style="vertical-align: middle">clear</i>yyyy</p>
    <p><span style="vertical-align: top">yyyy</span><i class="material-icons">clear</i><span style="vertical-align: top">yyyy</span></p>
  </body>
</html>

Upvotes: 4

Related Questions