这个问题已经有了答案:
Vertically align text next to an image?
20个答案
我有下面的代码,我想将文本垂直居中在图像旁边。
.section_content {
width: 400px;
}
.section_content > ul > li > img {
width: 40px;
height: 40px;
padding: 5px;
}
.section_content > ul > li > a {
vertical-align: top;
}
.section_content > ul > li {
list-style-type: none;
}
.section_content > ul {
list-style-type: none;
padding-top: 45px;
padding-left: 5px;
}
<div class="section_content">
<ul>
<li><img src="img/linkedin.svg"><a href="https://be.linkedin.com/in/lel">LinkedIn</a></li>
<li>GitHUb</li>
</ul>
</div>
最佳答案
你有vertical-align: top
在那里;你想要的是vertical-align: middle
,在链接和它应该坐在旁边的图像上。
.section_content {
width: 400px;
}
.section_content > ul > li > img {
width: 40px;
height: 40px;
padding: 5px;
}
.section_content > ul > li > a,
.section_content > ul > li img {
vertical-align: middle;
}
.section_content > ul > li {
list-style-type: none;
}
.section_content > ul {
list-style-type: none;
padding-top: 45px;
padding-left: 5px;
}
<div class="section_content">
<ul>
<li><img src="img/linkedin.svg"><a href="https://be.linkedin.com/in/lel">LinkedIn</a></li>
<li>GitHUb</li>
</ul>
</div>