CODEWITHSUNDEEP
htmlcss
Webappsdeva
Webappsdeva

Reputation: 337

How to vertically align text with icon

I have added awesome icon with p tag and text is appearing below the icon ,how to fix this so text should veritically align itself.

How can I make text vertically align so Croydon should not below the icon , it should below the 21a ?

    <p><i class="fas fa-map-marker-alt"></i>21a George Street<br> Croydon CR0 1LA</p>

`.fas {
    font-size: 30px;
    color: #C1761B;
    margin-right: 10px;
    margin-top: 5px;
}`

Many thanks

Upvotes: 0

Views: 2168

Answers (2)

user7148391
user7148391

Reputation:

Might wanna separate the i from the inside the text so we can have control over both.

Styling on the div just for the explanation and visual effect.

div {
  border: 1px solid;
  display: inline-block;
  padding: 10px;
  margin: 10px;
}

.fa {
  font-size: 30px;
  color: #C1761B;
  display: inline-block;
  border: 1px solid;
  vertical-align: middle;
}

p {
  border: 1px solid;
  vertical-align: middle;
  display: inline-block;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
  <i class="fa fa-map-marker"></i>
  <p>21a George Street <br>Croydon CR0 1LA</p>
</div>

Upvotes: 1

Martin
Martin

Reputation: 562

As font-icons works like fonts, it is normal in your case that it aligns only with the first line !

The solution might be nesting everything in a div, and use display:inline-block one the paragraph, like so :

.fas {
    font-size: 30px;
    color: #C1761B;
    margin-right: 10px;
    margin-top: 5px;
}

p {
  display:inline-block;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

  <div>
    <i class="fas fa-map-marker"></i>
    <p>21a George Street<br> Croydon CR0 1LA</p>
  </div>

Upvotes: 1

Related Questions