好的，所以我一直在寻找与我有相同问题的人，但是没有找到任何东西（几乎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="#"> [email protected]</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;
}
为了使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;
}
我在示例中删除了内联CSS样式。您可以img:nth-of-type()用来将边距应用于第二个元素。只是把选项扔在那里。
#sosial img:nth-of-type(2) {
margin-left:50px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句