3 回答

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>

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

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>
添加回答
舉報