如何解决将文本集中在带有图标CSS的按钮中
我有2个按钮,每个按钮带有图标和文本。 问题是文本不正确,我希望它处于同一水平。在不更改图标大小的情况下该如何做?
HTML + CSS代码:
.cv-container button
{
cursor: pointer;
width: 250px;
height: 50px;
font-size: 18px;
border-radius: 5px;
border-width: 2px;
overflow: hidden;
outline: none;
border-color: black;
display: inline-block;
text-align: center;
}
<div class="cv-container">
<a href="Files/Tsahi Barshavsky - CV.docx" style="margin-right: 5px;" download>
<button><img src="Images/doc.svg">Resume - DOC version</button>
</a>
<a href="Files/Tsahi Barshavsky - CV.pdf" style="margin-left: 5px;" download>
<button><img src="Images/pdf.svg">Resume - PDF version</button>
</a>
</div>
解决方法
我建议的最简单的更改是将line-height
添加为具有与height
相同值的属性。见下文。
.cv-container button
{
cursor: pointer;
width: 250px;
height: 50px;
font-size: 18px;
line-height: 50px;
border-radius: 5px;
border-width: 2px;
overflow: hidden;
outline: none;
border-color: black;
display: inline-block;
text-align: center;
}
<div class="cv-container">
<a href="Files/Tsahi Barshavsky - CV.docx" style="margin-right: 5px;" download>
<button><img src="Images/doc.svg">Resume - DOC version</button>
</a>
<a href="Files/Tsahi Barshavsky - CV.pdf" style="margin-left: 5px;" download>
<button><img src="Images/pdf.svg">Resume - PDF version</button>
</a>
</div>
,
您可以使用flex
属性来解决此问题。还有其他方法,但是这一方法很简单。
.cv-container button
{
cursor: pointer;
width: 250px;
height: 50px;
font-size: 18px;
border-radius: 5px;
border-width: 2px;
overflow: hidden;
outline: none;
border-color: black;
display: flex;
align-items: center;
justify-content: center;
}
.cv-container{
display:flex;
flex-wrap: wrap;
}
<div class="cv-container">
<a href="Files/Tsahi Barshavsky - CV.docx" style="margin-right: 5px;" download>
<button><img src="Images/doc.svg">Resume - DOC version</button>
</a>
<a href="Files/Tsahi Barshavsky - CV.pdf" style="margin-left: 5px;" download>
<button><img src="Images/pdf.svg">Resume - PDF version</button>
</a>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。