我有以下问题:
我试图让他们从底部排成一行,这样他们都坐下来了。我在vertical-align: bottom;
上尝试了img
,但没有任何反应?
.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>
这是为什么?我错过了一些不经意的东西吗?
答案 0 :(得分:1)
问题是您需要将vertical-align
应用于内联项。目前,您已经浮动了块元素。取消浮动并使其与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>
答案 1 :(得分:1)
检查一下。因为它是我在我的经验中找到的社交图标列表,所以最好将它们作为列表在语义上显示。这使您可以比div更容易display:inline;
。
https://codepen.io/Robhern135/pen/ppWgKr
body {
background-color: black;
width: 400px;
margin: auto;
}
ul {
padding: 40px 0 0 0;
border-bottom: 2px solid white;
}
li {
width: 35px;
display: inline;
margin: 0 40px 0 40px;
}
li.icon a {
text-decoration: none;
}
.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;
}
<ul>
<li 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>
</li>
<!-- LinkedIn -->
<li 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>
</li>
<!-- Twitter -->
<li 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>
</li>
<!-- Email -->
<li 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>
</li>
</ul>
我在底部加了一个边框,以便于查看它是如何对齐的。有任何问题让我知道。
答案 2 :(得分:0)
首先,您应该为所有图标设置一个容器,其高度固定且line-height
与height
相同。
所有icon
div必须位于displa: inline-block
。 vertical-align
设置为middle
,line-height
为&#34;重置&#34;到normal
。
.icons {
background-color: black;
height: 100px;
line-height: 100px;
}
.icons .icon {
display: inline-block;
margin-left: 15px;
max-height: 35px!important;
max-width: 35px!important;
vertical-align: middle;
line-height: normal;
}
&#13;
<div class="icons">
<!-- 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>
</div>
&#13;