将文本集中在带有图标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>