How to vertically align text and an image using CSS?

Question

How to vertically align text and an image using CSS?

I am struggling with aligning a link in my html file. The link displays the text "PROTOCOL" along with an image, but they are not aligned properly. Here is the code snippet:

<a href="#">PROTOCOL<span id="my-image"><img src="xxxxx"></img></span>

The text and image are not vertically aligned, making the link look horrible. I need help to align them in the middle using a separate CSS file. You can find my code on Plunker for reference.

If anyone could assist me with this issue, I would greatly appreciate it. Thank you!

css html

Answer 1

Answer №1

Include the following CSS rule to add vertical-align: middle to the styles of #my-image img:

#my-row{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  padding:0;
  text-align:center;
  background-color: white;
}
#my-row a{
  display:inline-block;
  padding:10px;
  color: black;;
  text-decoration:none;
}
#my-image img {
  vertical-align: middle;
}

<div>
  <ul id="my-row">        
    <li>
      <a href="#">PROTOCOL<span id="my-image"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNMTQuMTAxLDQyLjMxNGMtMS44NywwLTMuNjI4LTAuNzI5LTQuOTUtMi4wNTFMNy43MzYsMzguODVjLTIuNzI5LTIuNzI5LTIuNzI5LTcuMTcxLDAtOS44OTlsOS4xOTItOS4xOTIgICAgIGMxLjMyMi0xLjMyMiwzLjA4LTIuMDUxLDQuOTUtMi4wNTFzMy42MjgsMC43MjksNC45NDksMi4wNTFsMS40MTQsMS40MTRjMC4zOTEsMC4zOTEsMC4zOTEsMS4wMjMsMCwxLjQxNHMtMS4wMjMsMC4zOTEtMS40MTQsMCAgICAgbC0xLjQxNC0xLjQxNGMtMC45NDQtMC45NDQtMi4yLTEuNDY1LTMuNTM1LTEuNDY1Yy0xLjMzNiwwLTIuNTkyLDAuNTIxLTMu...

Answer 2

Include the following CSS rule to add vertical-align: middle to the styles of #my-image img:

#my-row{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  padding:0;
  text-align:center;
  background-color: white;
}
#my-row a{
  display:inline-block;
  padding:10px;
  color: black;;
  text-decoration:none;
}
#my-image img {
  vertical-align: middle;
}

<div>
  <ul id="my-row">        
    <li>
      <a href="#">PROTOCOL<span id="my-image"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNMTQuMTAxLDQyLjMxNGMtMS44NywwLTMuNjI4LTAuNzI5LTQuOTUtMi4wNTFMNy43MzYsMzguODVjLTIuNzI5LTIuNzI5LTIuNzI5LTcuMTcxLDAtOS44OTlsOS4xOTItOS4xOTIgICAgIGMxLjMyMi0xLjMyMiwzLjA4LTIuMDUxLDQuOTUtMi4wNTFzMy42MjgsMC43MjksNC45NDksMi4wNTFsMS40MTQsMS40MTRjMC4zOTEsMC4zOTEsMC4zOTEsMS4wMjMsMCwxLjQxNHMtMS4wMjMsMC4zOTEtMS40MTQsMCAgICAgbC0xLjQxNC0xLjQxNGMtMC45NDQtMC45NDQtMi4yLTEuNDY1LTMuNTM1LTEuNDY1Yy0xLjMzNiwwLTIuNTkyLDAuNTIxLTMu...

Answer 3

Answer №2

you can resolve this issue by utilizing flexbox

#my-row{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
padding:0;
text-align:center;
background-color: white;
}
#my-row a{
padding:10px;
color: black; ;
text-decoration:none;
        display: flex;
        justify-content: center;
        align-items: center;
}

<div>
        <ul id="my-row">        
            <li>
                <a href="#">PROTOCOL<span id="my-image"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICA9IDQ4ICAgNCNjcGM7IGNpdGVybCAuLi48L3N2Zz4 data:image/svg+xml;base64,></span></a>
            </li>
        </ul>
    </div>

Answer 4

you can resolve this issue by utilizing flexbox

#my-row{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
padding:0;
text-align:center;
background-color: white;
}
#my-row a{
padding:10px;
color: black; ;
text-decoration:none;
        display: flex;
        justify-content: center;
        align-items: center;
}

<div>
        <ul id="my-row">        
            <li>
                <a href="#">PROTOCOL<span id="my-image"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICA9IDQ4ICAgNCNjcGM7IGNpdGVybCAuLi48L3N2Zz4 data:image/svg+xml;base64,></span></a>
            </li>
        </ul>
    </div>

Answer 5

Answer №3

One useful tip is to match the line-height of your text with the height of your image. This, combined with floating your image to the right, can help create a visually pleasing layout.

Answer 6

One useful tip is to match the line-height of your text with the height of your image. This, combined with floating your image to the right, can help create a visually pleasing layout.

How to vertically align text and an image using CSS?

Answer №1

Answer №2

Answer №3

Similar questions

Using a template can sometimes display markup instead of the actual content when incorporating context and forms

The div needs to be positioned above another div, not beneath it

Using Jquery to create a fading effect when changing the color by checking a checkbox

Tracking the User Interface efficiency of a Java Applet running on a website

When trying to iterate through a list, I am unable to access a property using `<html:checkbox property="...">`

Failure of Outlook 2007, 2010, and 2013 to Recognize Conditional CSS

Using automatic margins with tabs in the latest version of Bootstrap, known as Bootstrap

Tips for allowing an HTML form to submit only if the numbers in the fields total to a specific sum

The hover effect on the menu button is not covering the entire button when the screen is resized

The behavior of -webkit-border-radius differs from that of -moz-border-radius

When the md-menu is clicked, the Top Nav shifts upwards along with the mdDialog buttons

I am looking for JavaScript or jQuery code that allows me to incorporate a "Save This Page As" button

Avoiding fuzzy text and pictures

Issues with the functionality of the Angular JS scope variable

Where would you start looking if the right side of a table border is not visible?

Displaying all information across the page width is a feature that

showcasing a set of div elements by using forward and backward buttons

eliminate the offspring of a component (chessboard)

Can a Material UI Select element be made unresponsive to hover effects?

When hovering over .nav-item, the nav-link color remains unchanged