Vertical align text to image in header - Shopify

MorganPubblicita
December 23, 2020
97 views
3 votes
3 Answers

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>

Answers

@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;
}

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Vertical align text to image in header – Shopify

Answers