CODEWITHSUNDEEP
htmlcss
helpmeplease
helpmeplease

Reputation: 59

Align icon to text size

I'm trying to display an image in an icon next to a piece of text. It sits slightly below the text and I'd like it to at least be the same height as the text aka vertically aligned to the middle.

.text {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    line-height: normal;
    color: black;
}

.em-image{
    background-image: url(https://i.imgur.com/r8hkG1o.png);
}

[class^="em-"], [class*=" em-"], .em-png {
    height: 1em;
    width: 1em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
}
<p class="text"><i class="em-image"></i> Name</p>

It's currently looking like this Example of current output Whereas I'd prefer it to look like this Example of desired output

Is there a way to at least make the image match the line height? The image sits at the bottom now but I'd like it the full height and aligned vertically to the text, I'm just not sure how to go about this, could the same be done with a span or a DIV containing the image as a background instead?

Upvotes: 4

Views: 4293

Answers (5)

Sir_Red_DAB
Sir_Red_DAB

Reputation: 131

I would use Flexbox and <span> instead of <p> to achieve this. With the Flexbox approach you can center all the items horizontally and vertically.

Why <span>? Because it is a generic inline container for phrasing content, which does not inherently represent anything.

.wrapper {
  display: flex;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  font-size: 75px;
  line-height: 1;
}

span {
  margin: 0 0 0 .25em;
}

.em-image {
  background-image: url(https://i.imgur.com/r8hkG1o.png);
  height: 1em; /* Change this value to match the desired height */
  width: 1em; /* Change this value to match the desired width */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}
<div class="wrapper">
  <i class="em-image"></i>
  <span>Name</span>
</div>

Upvotes: 1

alotropico
alotropico

Reputation: 1994

I'd suggest several things:

  • Use "em", as you were doing. "rem" will take the root font-size, and will break the component if that changes, while "em" will keep the image size proportional to the label text.
  • Use flexbox. It's shorter, more clear and modern.
  • No font actually occupies the whole vertical space. There is some extra space above and bellow. The typography you are using, Roboto, occupies approximately 80% of the vertical space, so that should be reflected in your css if want to be really precise.
  • Optional: the font is also not exactly centered, it has slightly more space bellow than above, so you'll need to correct this, by a factor of 2%.

The final code would be:

.text {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    display: flex;
    align-items: center;
}

.em-image{
    background-image: url(https://i.imgur.com/r8hkG1o.png);
}

[class^="em-"], [class*=" em-"], .em-png {
    height: .8em;
    width: .8em;
    background-position: center;
    background-size: contain;
    margin-right: .25em;
    margin-top: -.02em;
}
<p class="text"><i class="em-image"></i> Name</p>

Upvotes: 0

Dpk
Dpk

Reputation: 645

I Suggest that use vertical-align:baseline and use 'rem' instead 'em' that should work.

.text {
    font-family: 'Roboto', sans-serif;
    font-size: 2.5rem;
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    line-height: normal;
    color: black;
}

.em-image{
    background-image: url(https://i.imgur.com/r8hkG1o.png);
}

[class^="em-"], [class*=" em-"], .em-png {
    height: 2rem;
    width: 2rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: baseline;
}
<p class="text"><i class="em-image"></i> Name</p>

Upvotes: 4

Riskbreaker
Riskbreaker

Reputation: 4791

My suggestion is to use inline-flex to the class .text (instead of inline-block)

then you can just give the icon a align-self: center and it should be what you are looking for. You will probably need to adjust the spacing but should be good.

.text {
  display: inline-flex;
}

[class^="em-"] {
  align-self: center; 
}

Upvotes: 0

Abramo
Abramo

Reputation: 105

Simply, Try to find the height of the text and make max height to the icon equal to the height of the text

you may try to add this CSS code:

[class^="em-"], [class*=" em-"], .em-png {
                                             max-height: 200px;
}

if the icon is larger smaller than the text height try to increase or decrease the icon height

i hop this answer helps

Upvotes: 0

Related Questions