gpt4 book ai didi

html - 图像未与垂直对齐对齐

转载 作者:太空宇宙 更新时间:2023-11-04 01:25:58 25 4
gpt4 key购买 nike

我有以下问题:

enter image description here

我试着让他们从底部排成一排,这样他们就都坐下了。我已经在 img 上尝试了 vertical-align: bottom;,但没有任何反应?

.social-icons img {
margin-top: 40px;
max-height: 35px!important;
/*height:35px!important;*/
max-width: 35px!important;
/*width:35px!important;*/
margin-left: 15px;
float: left;
vertical-align: bottom;
padding-right: 30px;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
}
<!-- YouTube -->
<div class="icon">
<a href="https://www.youtube.com/user/tthreeTV" onclick="window.open(' https://www.youtube.com/user/tthreeTV','newwindow','width=600, height=300');return false;">
<img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/TYP/youtube.png" alt="Facebook">
</a>
</div>

<!-- LinkedIn -->
<div class="icon">
<a return="false" href='https://www.linkedin.com/company/t-three-consulting' onclick="window.open(' https://www.linkedin.com/company/t-three-consulting','newwindow','width=600, height=300');return false;">
<img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/linkedin2.png" alt="LinedIn">
</a>
</div>

<!-- Twitter -->
<div class="icon">
<a return="false" href='https://twitter.com/tthreetweet' onclick="window.open(' https://twitter.com/tthreetweet','newwindow','width=600, height=300');return false;">
<img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/twitter2.png" alt="Twitter">
</a>
</div>

<!-- Email -->
<div class="icon">
<a href="mailto:test@test.com" target="_top">
<img src="https://content.t-three.co.uk/hubfs/tp-2017/Template%20refresh/Littlebooks/mail.png" alt="Email">
</a>
</div>

这是为什么?我是否遗漏了什么?

最佳答案

问题是您需要将 vertical-align 应用于内联元素。目前,您有 float block 元素。取消 float 并使用 display: inline;display: inline-block; 使它们内联。

最终我会使用更现代的方法并使用 flexbox 来解决这个问题,align-items会做你需要的。

div {
display: flex;
align-items: center;
}

div img {
display: block;
margin: 5px;
max-width: 35px;
max-height: 35px;
}
<div class="social">
<a href="#"><img src="https://placehold.it/70x90"></a>
<a href="#"><img src="https://placehold.it/35x35"></a>
<a href="#"><img src="https://placehold.it/35x30"></a>
<a href="#"><img src="https://placehold.it/35x35"></a>
</div>

关于html - 图像未与垂直对齐对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48098578/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com