CODEWITHSUNDEEP
csshtml
SamDevx
SamDevx

Reputation: 2378

CSS - how to align text and an image vertically?

In an html file, I have a link that displays the text "PROTOCOL" and an image as follows. 

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

But the link looks horrible - the text and image are not aligned vertically. I need to align them in the middle, preferably using a separate CSS file.

Here is my source at Plunker demonstrating the issue. Can someone help?

Thanks a lot!

Upvotes: 0

Views: 264

Answers (3)

Mohammad Batroukh
Mohammad Batroukh

Reputation: 13

If you know the height of your image you can always set the line-height of the accompanying text to be the same value. Doing that along with floating your image to the right should solve

Upvotes: 0

Santosh Khalse
Santosh Khalse

Reputation: 12720

use flex box can be solve this problem

#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/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNMTQuMTAxLDQyLjMxNGMtMS44NywwLTMuNjI4LTAuNzI5LTQuOTUtMi4wNTFMNy43MzYsMzguODVjLTIuNzI5LTIuNzI5LTIuNzI5LTcuMTcxLDAtOS44OTlsOS4xOTItOS4xOTIgICAgIGMxLjMyMi0xLjMyMiwzLjA4LTIuMDUxLDQuOTUtMi4wNTFzMy42MjgsMC43MjksNC45NDksMi4wNTFsMS40MTQsMS40MTRjMC4zOTEsMC4zOTEsMC4zOTEsMS4wMjMsMCwxLjQxNHMtMS4wMjMsMC4zOTEtMS40MTQsMCAgICAgbC0xLjQxNC0xLjQxNGMtMC45NDQtMC45NDQtMi4yLTEuNDY1LTMuNTM1LTEuNDY1Yy0xLjMzNiwwLTIuNTkyLDAuNTIxLTMuNTM2LDEuNDY1TDkuMTUsMzAuMzY0ICAgICBjLTEuOTQ5LDEuOTQ5LTEuOTQ5LDUuMTIxLDAsNy4wNzFsMS40MTQsMS40MTRjMC45NDQsMC45NDQsMi4yLDEuNDY1LDMuNTM2LDEuNDY1YzEuMzM1LDAsMi41OTEtMC41MjEsMy41MzUtMS40NjVMMjQsMzIuNDg1ICAgICBjMC4zOTEtMC4zOTEsMS4wMjMtMC4zOTEsMS40MTQsMHMwLjM5MSwxLjAyMywwLDEuNDE0bC02LjM2NCw2LjM2NEMxNy43MjksNDEuNTg2LDE1Ljk3MSw0Mi4zMTQsMTQuMTAxLDQyLjMxNHoiLz48L2c+PGc+PHBhdGggZD0iTTI2LjEyMSwzMC4yOTNjLTEuODY5LDAtMy42MjgtMC43MjktNC45NDktMi4wNTFjLTAuMzkxLTAuMzkxLTAuMzkxLTEuMDIzLDAtMS40MTRzMS4wMjMtMC4zOTEsMS40MTQsMCAgICAgYzAuOTQ0LDAuOTQ0LDIuMiwxLjQ2NSwzLjUzNSwxLjQ2NWMxLjMzNiwwLDIuNTkyLTAuNTIxLDMuNTM2LTEuNDY1bDkuMTkyLTkuMTkyYzEuOTQ5LTEuOTQ5LDEuOTQ5LTUuMTIxLDAtNy4wN0wzNy40MzYsOS4xNSAgICAgYy0xLjk0OS0xLjk0OS01LjEyMi0xLjk0OS03LjA3MSwwTDI0LDE1LjUxNWMtMC4zOTEsMC4zOTEtMS4wMjMsMC4zOTEtMS40MTQsMHMtMC4zOTEtMS4wMjMsMC0xLjQxNGw2LjM2NC02LjM2NCAgICAgYzIuNzI5LTIuNzI5LDcuMTctMi43MjksOS44OTksMGwxLjQxNCwxLjQxNWMyLjcyOSwyLjcyOSwyLjcyOSw3LjE3LDAsOS44OThsLTkuMTkyLDkuMTkyICAgICBDMjkuNzUsMjkuNTY0LDI3Ljk5MSwzMC4yOTMsMjYuMTIxLDMwLjI5M3oiLz48L2c+PC9nPjwvZz48L3N2Zz4="></img></span></a>
            </li>
        </ul>
    </div>

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39372

Add vertical-align: middle to 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+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNMTQuMTAxLDQyLjMxNGMtMS44NywwLTMuNjI4LTAuNzI5LTQuOTUtMi4wNTFMNy43MzYsMzguODVjLTIuNzI5LTIuNzI5LTIuNzI5LTcuMTcxLDAtOS44OTlsOS4xOTItOS4xOTIgICAgIGMxLjMyMi0xLjMyMiwzLjA4LTIuMDUxLDQuOTUtMi4wNTFzMy42MjgsMC43MjksNC45NDksMi4wNTFsMS40MTQsMS40MTRjMC4zOTEsMC4zOTEsMC4zOTEsMS4wMjMsMCwxLjQxNHMtMS4wMjMsMC4zOTEtMS40MTQsMCAgICAgbC0xLjQxNC0xLjQxNGMtMC45NDQtMC45NDQtMi4yLTEuNDY1LTMuNTM1LTEuNDY1Yy0xLjMzNiwwLTIuNTkyLDAuNTIxLTMuNTM2LDEuNDY1TDkuMTUsMzAuMzY0ICAgICBjLTEuOTQ5LDEuOTQ5LTEuOTQ5LDUuMTIxLDAsNy4wNzFsMS40MTQsMS40MTRjMC45NDQsMC45NDQsMi4yLDEuNDY1LDMuNTM2LDEuNDY1YzEuMzM1LDAsMi41OTEtMC41MjEsMy41MzUtMS40NjVMMjQsMzIuNDg1ICAgICBjMC4zOTEtMC4zOTEsMS4wMjMtMC4zOTEsMS40MTQsMHMwLjM5MSwxLjAyMywwLDEuNDE0bC02LjM2NCw2LjM2NEMxNy43MjksNDEuNTg2LDE1Ljk3MSw0Mi4zMTQsMTQuMTAxLDQyLjMxNHoiLz48L2c+PGc+PHBhdGggZD0iTTI2LjEyMSwzMC4yOTNjLTEuODY5LDAtMy42MjgtMC43MjktNC45NDktMi4wNTFjLTAuMzkxLTAuMzkxLTAuMzkxLTEuMDIzLDAtMS40MTRzMS4wMjMtMC4zOTEsMS40MTQsMCAgICAgYzAuOTQ0LDAuOTQ0LDIuMiwxLjQ2NSwzLjUzNSwxLjQ2NWMxLjMzNiwwLDIuNTkyLTAuNTIxLDMuNTM2LTEuNDY1bDkuMTkyLTkuMTkyYzEuOTQ5LTEuOTQ5LDEuOTQ5LTUuMTIxLDAtNy4wN0wzNy40MzYsOS4xNSAgICAgYy0xLjk0OS0xLjk0OS01LjEyMi0xLjk0OS03LjA3MSwwTDI0LDE1LjUxNWMtMC4zOTEsMC4zOTEtMS4wMjMsMC4zOTEtMS40MTQsMHMtMC4zOTEtMS4wMjMsMC0xLjQxNGw2LjM2NC02LjM2NCAgICAgYzIuNzI5LTIuNzI5LDcuMTctMi43MjksOS44OTksMGwxLjQxNCwxLjQxNWMyLjcyOSwyLjcyOSwyLjcyOSw3LjE3LDAsOS44OThsLTkuMTkyLDkuMTkyICAgICBDMjkuNzUsMjkuNTY0LDI3Ljk5MSwzMC4yOTMsMjYuMTIxLDMwLjI5M3oiLz48L2c+PC9nPjwvZz48L3N2Zz4="></span></a>
  </li>
</ul>
</div>

Upvotes: 2

Related Questions