PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

[FIXED] How do I apply vertical centering when my DIV contains images?

 November 17, 2022     centering, css, html, vertical-alignment     No comments   

Issue

Always with this centering. I want to keep everything vertically aligned in the center in the following but its aligning on the bottom. How can I make it align to the middle?

div.more_info {
    display: none;
    background-color: #ffffff;
    color: #000000;
    text-align: left;
    padding: 5px;
}

#exchangeRate {
    padding-top: 10px;
    vertical-align: middle;
}
<div id="buttonDescription">
    One of the currencies to help developing nations is Electroneum. <br/> 
    <div id="exchangeRate">
        <img width="25" src="https://s2.coinmarketcap.com/static/img/coins/200x200/2137.png" alt="Electroneum" />
        1 coin = 
        <span id="currencyValueInUsd">
            <img width="25" src="https://previews.123rf.com/images/iulika1/iulika11711/iulika1171100083/89037076-dollar-sign-usd-currency-symbol-black-icon-on-transparent-background-vector-illustration.jpg" alt="Dollar sign" />
            0.0
        </span> 	
    </div>


Solution

To get the images to align themselves in the middle, you should add a vertical-align of middle to #exchangeRate img.

You are also missing the closing div fag for <div id="buttonDescription">.

Here is the updated code;

div.more_info {
  display: none;
  background-color: #ffffff;
  color: #000000;
  text-align: left;
  padding: 5px;
}

#exchangeRate {
  padding-top: 10px;
  vertical-align: middle;
  line-height: 10px;
}

#exchangeRate img {
  vertical-align: middle;
}
<div id="buttonDescription">
  One of the currencies to help developing nations is Electroneum. <br/>
  <div id="exchangeRate"><img width="25" src="https://s2.coinmarketcap.com/static/img/coins/200x200/2137.png" alt="Electroneum" /> 1 coin =
    <span id="currencyValueInUsd"><img width="25" src="https://previews.123rf.com/images/iulika1/iulika11711/iulika1171100083/89037076-dollar-sign-usd-currency-symbol-black-icon-on-transparent-background-vector-illustration.jpg" alt="Dollar sign" />
      0.0</span>
  </div>
</div>



Answered By - Austen Holland
Answer Checked By - Candace Johnson (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing