CODEWITHSUNDEEP
htmlcss
barakadax
barakadax

Reputation: 47

height of text compare to an image

I can't put the text in the middle height of the image it is in with.
This is what I write in the HTML:

<p><img class="languagesIcons" src="img/x.png">x</p>

This is what I write in the CSS:

.languagesIcons {
   width: 55px;
   margin: 0 10px 0 0;
}

All of that runs in a <div> which its CSS is:

#languages {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   font-size: 22px;
   gap: 30px;
   padding: 20px 0 0 0;
}

Upvotes: 0

Views: 71

Answers (3)

Beata
Beata

Reputation: 56

You could just add vertical-align:middle to your languageIcons class:

.languageIcons{
width:55px;
margin: 0 10px 0 0;
vertical-align:middle;
}

Upvotes: 1

Kev Rob
Kev Rob

Reputation: 322

You should use position:absoluteon the image and the text placed in a span for example and use position:relativeon the container which is a p tag here. Then you can adjust its position with transform:translateY()for example. See the code below :

p{
position:relative
}

.languagesIcons {
   width: 55px;
   margin: 0 10px 0 0;
   position:absolute
}
div{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   font-size: 22px;
   gap: 30px;
   padding: 20px 0 0 0;
}
span{
position:absolute;
transform:translateY(50%)
}
<div><p><img class="languagesIcons" src="img/x.png"><span>x</span></p></div>

Upvotes: 1

Gr&#233;gory C
Gr&#233;gory C

Reputation: 429

To vertically align text and image, use :

<p>
    <img class="languagesIcons" src="img/x.png" style="vertical-align: middle;" >
    <span style="vertical-align: middle;" >x</span>
</p>

Upvotes: 0

Related Questions