Question

好的，所以我一直在寻找与我有同样问题的人，但没有找到任何人（差不多100％的人，你们中的一些人会链接到一个）。

我设法将一个div放在一个div中，这个div再次位于页脚内（非常纯粹的矫枉过正）。但我的问题是我将两个图像集中在一起，并连接了两行文字。我希望文本垂直居中显示（以图像为中心），而不是像现在一样显示在图像的右下角。

非常简单，这很简单，但这里有一个链接：

<footer>

<div id="footer">
<div id="sosial">
<img src="bilder/telefon.jpg" style="height:50%;">
<a href="#"> +47 930 98 907</a>
<img src="bilder/mail.png" style="height:50%; margin-left:20%; margin-top:20px;">
<a href="#"> Bryter-pedersen@hotmail.com</a>
</div>
</div>

</footer>




*{
    margin: 0px;
    padding: 0px;
    color: #fff;
}

footer {
width:100%;
height: 80px;
background-color: red;
}
#footer{
height: 100%;
}

#sosial {
text-align: center;
vertical-align: middle;

}
#sosial a{
list-style-type: none;
text-decoration: none;

}

Answer 1

为了垂直对齐两个元素的锚点img旁边的vertical-align: middle元素。

#sosial img,
#sosial a {
    vertical-align: middle;
}

为了将页脚中的所有包含元素垂直居中，您可以使用table-cell / table方法。

#footer {
    height: 100%;
    width: 100%;
    display: table;
}
#sosial {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

Updated Exmaple

我在示例中删除了内联CSS样式。您可以使用img:nth-of-type()将边距应用于第二个元素。只是抛出选择。

#sosial img:nth-of-type(2) {
    margin-left:50px;
}

Answer 2

如果你知道你可以使用的图像的高度是多少，在我的例子中是50px：

#sosial a {
    list-style-type: none; 
    text-decoration: none;
    line-height: 50px;
    display: inline-block;
    height: 100%;
    vertical-align: middle;

}

通过页脚中的图像居中文本

2 个答案: