Vertical align text to image in header

Question

Link: https://7215y46b21s4r6en-26803830855.shopifypreview.com/

What I'd like to do is make it so the text that appears on top in the dark green bar would appear vertically aligned to the image, and not this weird alignment that I can't figure how I've made...

Here is the html:

@media screen and (max-width: 425px){
  #message{font-size:10px;}
  .shippingimage{display:none;}
}
.ShowHide {
  overflow: hidden;
  background-color: #2a4735;
  color: white;
}
#left-showing {
  overflow: hidden;
}
#right-showing {
  float: right;
  width: 30px;
  text-align: center;
}
.ShowHide a {
   color: white;
   text-decoration: none;
}
.ShowHide a:hover {
   text-decoration:underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ShowHide" id="Bar">
  <div id="right-showing">
    <a href="#" onclick="Hide(Bar);">X</a>
  </div>
  
  <div id="left-showing">

    <p style="margin-bottom:auto;text-align:center;">
      <span id="message"></span></p>
    
    <script type="text/javascript">
    function nextMsg(index) {
        if (messages.length === index) {
            nextMsg(0);
        } else {
            $('#message').html(messages[index]).fadeIn(1000).delay(2000).fadeOut(1000, ()=> nextMsg(index+1));
        }
    };

    var messages = [
        '<img src="https://i.imgur.com/bcq9ydY.png" width="30px" class="shippingimage"><a href="https://www.fermento24.com/pages/spedizione" style="letter-spacing: -0.5px;vertical-align: super;">Consegna gratuita in giornata a Napoli, Caserta e relative province sopra i 25€</a>',
        '<img src="https://i.imgur.com/pSAQiQp.png" width="35px" class="shippingimage"><a href="https://www.fermento24.com/pages/spedizione" style="vertical-align: super;"> Spedizione gratuita nel resto d’Italia sopra i 120€</a>',
    ];

    $('#message').hide();

    nextMsg(0);
    </script>
</div>
</div>

your example has an error so we cannot see what you are trying to do — Tokimon, Dec 23 '20 at 08:54
Add `vertical-align: middle` to the `img` tag and remove `vertical-align: super` from the `anchor` tag — Ammar Yaqoob, Dec 23 '20 at 09:04

Wang Liang · Answer 1 · 2020-12-23T09:03:47.240

@media screen and (max-width: 425px){
  #message{font-size:10px;}
  .shippingimage{display:none;}
}
.ShowHide {
  overflow: hidden;
  background-color: #2a4735;
  color: white;
}
.shippingimage{
  vertical-align: bottom; <- added this
}
#left-showing {
  overflow: hidden;
}
#right-showing {
  float: right;
  width: 30px;
}
.ShowHide a {
   color: white;
   text-decoration: none;
   vertical-align: middle;
}
.ShowHide a:hover {
   text-decoration:underline;
}

score 0 · Answer 2 · answered Dec 23 '20 at 09:01

Remove vertical-align: super at the a tag and add vertical-align: middle at img tag should be work.

Example code:

@media screen and (max-width: 425px){
  #message{font-size:10px;}
  .shippingimage{display:none;}
}
.ShowHide {
  overflow: hidden;
  background-color: #2a4735;
  color: white;
}
#left-showing {
  overflow: hidden;
}
#right-showing {
  float: right;
  width: 30px;
  text-align: center;
}
.ShowHide a {
   color: white;
   text-decoration: none;
}
.ShowHide a:hover {
   text-decoration:underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ShowHide" id="Bar">
  <div id="right-showing">
    <a href="#" onclick="Hide(Bar);">X</a>
  </div>
  <div id="left-showing">
    <p style="margin-bottom:auto;text-align:center;">
      <span id="message"></span>
    </p>
    <script type="text/javascript">
      function nextMsg(index) {
        if (messages.length === index) {
          nextMsg(0);
        } else {
          $('#message').html(messages[index]).fadeIn(1000).delay(2000).fadeOut(1000, () => nextMsg(index+1));
        }
      };
      var messages = [
        '<img src="https://i.imgur.com/bcq9ydY.png" width="30px" class="shippingimage" style="vertical-align: middle;"><a href="https://www.fermento24.com/pages/spedizione" style="letter-spacing: -0.5px;">Consegna gratuita in giornata a Napoli, Caserta e relative province sopra i 25€</a>',
        '<img src="https://i.imgur.com/pSAQiQp.png" width="35px" class="shippingimage" style="vertical-align: middle;"><a href="https://www.fermento24.com/pages/spedizione"> Spedizione gratuita nel resto d’Italia sopra i 120€</a>',
      ];
      $('#message').hide();
      nextMsg(0);
    </script>
  </div>
</div>

score 0 · Answer 3 · answered Dec 23 '20 at 09:13

1 - I advise you to use the flex rules. Add this to your css:

#message{
  display: flex;
  align-items: center;
  justify-content: center;
}

2 - Remove styles attribute along with styles from this tag p:

<p style="margin-bottom:auto;text-align:center;">
...
</p>

3 - Also, your span #message tag gets display: inline dynamically. You need to disable this in javascript or jquery. Or use !important for display: flex in #message:

#message{
  display: flex!important;
  ...
}

If you follow my answer, then the content of your green header will look nice.

.ShowHide {
  overflow: hidden;
  background-color: #2a4735;
  color: white;
}
#left-showing {
  overflow: hidden;
}
#right-showing {
  float: right;
  width: 30px;
  text-align: center;
}
.ShowHide a {
   color: white;
   text-decoration: none;
}
.ShowHide a:hover {
   text-decoration:underline;
}

#message{
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 425px){
  #message{font-size:10px;}
  .shippingimage{display:none;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ShowHide" id="Bar">
  <div id="right-showing">
    <a href="#" onclick="Hide(Bar);">X</a>
  </div>
  
  <div id="left-showing">

    <p>
      <span id="message"></span></p>
    
    <script type="text/javascript">
    function nextMsg(index) {
        if (messages.length === index) {
            nextMsg(0);
        } else {
            $('#message').html(messages[index]).fadeIn(1000).delay(2000).fadeOut(1000, ()=> nextMsg(index+1));
        }
    };

    var messages = [
        '<img src="https://i.imgur.com/bcq9ydY.png" width="30px" class="shippingimage"><a href="https://www.fermento24.com/pages/spedizione" style="letter-spacing: -0.5px;vertical-align: super;">Consegna gratuita in giornata a Napoli, Caserta e relative province sopra i 25€</a>',
        '<img src="https://i.imgur.com/pSAQiQp.png" width="35px" class="shippingimage"><a href="https://www.fermento24.com/pages/spedizione" style="vertical-align: super;"> Spedizione gratuita nel resto d’Italia sopra i 120€</a>',
    ];

    $('#message').hide();

    nextMsg(0);
    </script>
</div>
</div>

Vertical align text to image in header

3 Answers3