标题中的文本与图像垂直对齐

Question

链接：https://7215y46b21s4r6en-26803830855.shopifypreview.com/

我想做的就是让深绿色条顶部出现的文本与图像垂直对齐，而不是这种奇怪的对齐方式，我无法弄清楚我是如何做到的......

这是 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>

Answer 1

删除vertical-align: superata标签并添加vertical-align: middleatimg标签应该可以。示例代码：@media screen and (max-width: 425px){&nbsp; #message{font-size:10px;}&nbsp; .shippingimage{display:none;}}.ShowHide {&nbsp; overflow: hidden;&nbsp; background-color: #2a4735;&nbsp; color: white;}#left-showing {&nbsp; overflow: hidden;}#right-showing {&nbsp; float: right;&nbsp; width: 30px;&nbsp; text-align: center;}.ShowHide a {&nbsp; &nbsp;color: white;&nbsp; &nbsp;text-decoration: none;}.ShowHide a:hover {&nbsp; &nbsp;text-decoration:underline;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="ShowHide" id="Bar">&nbsp; <div id="right-showing">&nbsp; &nbsp; <a href="#" onclick="Hide(Bar);">X</a>&nbsp; </div>&nbsp; <div id="left-showing">&nbsp; &nbsp; <p style="margin-bottom:auto;text-align:center;">&nbsp; &nbsp; &nbsp; <span id="message"></span>&nbsp; &nbsp; </p>&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; function nextMsg(index) {&nbsp; &nbsp; &nbsp; &nbsp; if (messages.length === index) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nextMsg(0);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#message').html(messages[index]).fadeIn(1000).delay(2000).fadeOut(1000, () => nextMsg(index+1));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; var messages = [&nbsp; &nbsp; &nbsp; &nbsp; '<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>',&nbsp; &nbsp; &nbsp; &nbsp; '<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>',&nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; &nbsp; $('#message').hide();&nbsp; &nbsp; &nbsp; nextMsg(0);&nbsp; &nbsp; </script>&nbsp; </div></div>

Answer 2

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

Answer 3

1 - 我建议您使用规则flex。将其添加到您的 CSS 中：#message{&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;}2 - 从此标签中删除styles属性和样式p：<p style="margin-bottom:auto;text-align:center;">...</p>3 - 此外，您的span #message标签是display: inline动态的。您需要在javascript或中禁用此功能jquery。或者!important用于：display: flex_#message#message{&nbsp; display: flex!important;&nbsp; ...}如果您遵循我的回答，那么您的绿色标题的内容会看起来不错。.ShowHide {&nbsp; overflow: hidden;&nbsp; background-color: #2a4735;&nbsp; color: white;}#left-showing {&nbsp; overflow: hidden;}#right-showing {&nbsp; float: right;&nbsp; width: 30px;&nbsp; text-align: center;}.ShowHide a {&nbsp; &nbsp;color: white;&nbsp; &nbsp;text-decoration: none;}.ShowHide a:hover {&nbsp; &nbsp;text-decoration:underline;}#message{&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;}@media screen and (max-width: 425px){&nbsp; #message{font-size:10px;}&nbsp; .shippingimage{display:none;}}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="ShowHide" id="Bar">&nbsp; <div id="right-showing">&nbsp; &nbsp; <a href="#" onclick="Hide(Bar);">X</a>&nbsp; </div>&nbsp;&nbsp;&nbsp; <div id="left-showing">&nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; <span id="message"></span></p>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; function nextMsg(index) {&nbsp; &nbsp; &nbsp; &nbsp; if (messages.length === index) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nextMsg(0);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#message').html(messages[index]).fadeIn(1000).delay(2000).fadeOut(1000, ()=> nextMsg(index+1));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; };&nbsp; &nbsp; var messages = [&nbsp; &nbsp; &nbsp; &nbsp; '<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>',&nbsp; &nbsp; &nbsp; &nbsp; '<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>',&nbsp; &nbsp; ];&nbsp; &nbsp; $('#message').hide();&nbsp; &nbsp; nextMsg(0);&nbsp; &nbsp; </script></div></div>