如何在 HTML/CSS 中的按鈕內對齊 svg 圖標？

Question

我正在嘗試將 svg 圖標放在常見問題解答按鈕中。 我可以只使用彈性框來對齊按鈕內的圖標嗎？

這是我的輸出：

這就是我想要實現的：

這是我的一些CSS：

.section-custom{
margin: 50px;
display: flex;
flex-direction: column;
align-items: center;  /*cross axis for column  */
}

  
.div-faq{
padding-top: 40px;
padding-bottom: 40px;

}

 
.div-faq-list-item{
display: flex;
align-items: center;  /*cross axis for row   */
}

.faq-btn{
background-color: #333;
font-size: 25px;
border: 0;
width: 800px;
padding: 22px;
margin: 4px;
text-align: left;
}

這是 HTML：

<section class="section-custom">
            <h1>Frequently Asked Questions</h1>

            <ul class="div-faq">
                <li class="div-faq-list-item">
                    <button class="faq-btn">What is Netflix?
                     </button>
                     <svg style="height: 50px; width: 50px; color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"><rect width="100%" height="100%" fill="#333333"></rect> 
                        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" fill="#ffffff"></path>
                     </svg>
                </li>
                <li class="div-faq-list-item"><button class="faq-btn">How much does Netflix cost?</button>
                    
                </li>
                <li class="div-faq-list-item"><button class="faq-btn">Where can I watch?</button></li>
                <li><button class="faq-btn">How do i cancel?</button></li>
                <li><button class="faq-btn">What can I watch on Netflix?</button></li>
                <li><button class="faq-btn">is Netflix good for kids?</button></li>

            </ul>

        </section>

Answer 1

從 SVG 圖標中刪除填充屬性，並使按鈕和 SVG 背景透明。 In-display flex 你可以通過 justify-content:space-between 來實現這個結果；

 ul{ list-style:none; display:flex; flex-direction:column; gap:0.6rem; background-color:black; padding:1rem; } ul li{ display:flex; padding:1rem; background-color:#2e2e2e; color:white; justify-content:space-between; align-items:center } li svg{ fill:transparent; } button{ font-size:1.6rem; background-color:transparent; color:white; border:none; }

 <ul class="div-faq"> <li class="div-faq-list-item"> <button class="faq-btn">What is Netflix?</button> <svg style="height: 50px; width: 50px; color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"><rect width="100%" height="100%" ></rect> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" fill="#ffffff"></path> </svg> </li> <li class="div-faq-list-item"> <button>How much does Netflix cost?</button> <svg style="height: 50px; width: 50px; color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"><rect width="100%" height="100%" ></rect> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" fill="#ffffff"></path> </svg> </li> </ul>

Answer 2

 .main{ margin: 50px; } .button-box{ display: flex; justify-content: space-between; background-color: #aaa; height: 50px; line-height: 50px; } .title{ padding: 0px 20px; } .icon{ align-self: center; background-color: #bbb; width: 40px; display: flex; justify-content: center; } .icon img{ width: 24px; height: 16px; }

 <div class="main"> <div class="button-box"> <div class="title">Title</div> <div class="icon"><img src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/1.2.3/src/icon-ios7-plus.svg" /></div> </div> </div>

Answer 3

為了將 svg 圖標添加到按鈕，您必須將其包含在標簽中，如下所示：

<button class="faq-btn">
    What is Netflix?
    <svg style="height: 50px; width: 50px; color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
        <rect width="100%" height="100%" fill="#333333"></rect> 
        <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" fill="#ffffff"></path>
    </svg>
</button>

在 css 樣式中，利用 flexbox 來幫助定位元素。 在您的情況下，應該將 flexbox 應用於按鈕類，以允許使用 space-between 和 center 項目對齊。 css 樣式應如下所示：

.faq-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  font-size: 25px;
  border: 0;
  width: 800px;
  padding: 22px;
  margin: 4px;
  text-align: left;
}