第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

標(biāo)題中的文本與圖像垂直對齊

標(biāo)題中的文本與圖像垂直對齊

隔江千里 2024-01-18 14:50:05
鏈接:https://7215y46b21s4r6en-26803830855.shopifypreview.com/我想做的就是讓深綠色條頂部出現(xiàn)的文本與圖像垂直對齊,而不是這種奇怪的對齊方式,我無法弄清楚我是如何做到的......這是 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>
查看完整描述

3 回答

?
慕村225694

TA貢獻(xiàn)1880條經(jīng)驗 獲得超4個贊

刪除vertical-align: superata標(biāo)簽并添加vertical-align: middleatimg標(biāo)簽應(yīng)該可以。


示例代碼:


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


查看完整回答
反對 回復(fù) 2024-01-18
?
ABOUTYOU

TA貢獻(xiàn)1812條經(jīng)驗 獲得超5個贊

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

}


查看完整回答
反對 回復(fù) 2024-01-18
?
慕標(biāo)5832272

TA貢獻(xiàn)1966條經(jīng)驗 獲得超4個贊

1 - 我建議您使用規(guī)則flex。將其添加到您的 CSS 中:


#message{

  display: flex;

  align-items: center;

  justify-content: center;

}

2 - 從此標(biāo)簽中刪除styles屬性和樣式p:


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

...

</p>

3 - 此外,您的span #message標(biāo)簽是display: inline動態(tài)的。您需要在javascript或中禁用此功能jquery?;蛘?important用于:display: flex_#message


#message{

  display: flex!important;

  ...

}

如果您遵循我的回答,那么您的綠色標(biāo)題的內(nèi)容會看起來不錯。


.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>


查看完整回答
反對 回復(fù) 2024-01-18
  • 3 回答
  • 0 關(guān)注
  • 187 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號