Question

如何有一个按钮的图标向左对齐（在按钮的最左侧）而文本仍居中于按钮？

.GoogleSignIn{
    border-radius: 50px;
    padding: 10px;
    text-align: center;
    align-items: center;
    width: 100%;
    height: 42px;
    font-size: 14px;
    font-weight: 500;
    background-color: white;
    border: none;
    color: black;
    margin-bottom: 10px;
    cursor: pointer;
    outline: none;
    display: flex;
    /* justify-content: center; */
}
.GoogleIcon{
    margin: -40px 0px -12px -440%;
}
.GoogleIconContainer{
    align-self: flex-end;
    display: flex;
}

<button className={classes.GoogleSignIn}>
                    <div className = {classes.GoogleIconContainer}>
                        <img src={GoogleIcon} className = {classes.GoogleIcon}/>
                    </div>
                    Sign in with google
</button>

Answer 1

5行CSS代码和额外的跨度（用于文本）。 **这个想法对于网站导航栏布局也很有用。

flex container
-- flex item 1 
-- flex item 2

“诀窍”：设置 flex-item-1 margin-right: auto（现在，flex-item-2移到右侧的“推送效果”）。

接下来，对 flex-item-2 （“推到右侧完全中心”），再使用一个 margin-right: auto

摘要

button{
  display: flex;  
  align-items: center;
  justify-content: center;
}
button img{
  margin-right: auto;
  border: 1px solid red;
}

button span{
  border: 1px solid red;
  margin-right: auto;
}

<button style="width: 100%;">
  <img src="https://svgshare.com/i/5vv.svg">
  <span>
    Hello world  
  </span>
</button>

<br>
<button style="width: 200px;">
  <img src="https://svgshare.com/i/5vv.svg">
  <span>
    Hello world  
  </span>
</button>

important 要获得“完美的V / H对齐” ，请不要在按钮-图标-或文本（“著名”错误）内添加任何额外的顶部/底部边距/填充。 >

important-2 移除按钮固定高度（避免出现Y溢出问题）。按钮的高度由内容（字体大小，图像）和填充/边框（box-model）声明。如果这对您确实很重要，请设置min-height（高度not）。 断行示例：

button{
  display: flex;  
  align-items: center;
  justify-content: center;
}
button img{
  margin-right: auto;
  border: 1px solid red;
}

button span{
  border: 1px solid red;
  margin-right: auto;
}

<button style="height: 20px;">
  <img src="https://svgshare.com/i/5vv.svg">
  <span style="font-size: 30px;">
    40px height ==> ovefrlow issues
  </span>
</button>

<br><br><br><br>

<button style="height: 30px; overflow-y: scroll">
  <img src="https://svgshare.com/i/5vv.svg">
  <span style="font-size: 40px;">
    40px height ==> ovefrlow issues
  </span>
</button>

完成：）

相关（额外阅读）：

Answer 2

在GoogleSignIn按钮中使用 display：flex 属性时，您可以使用 justify-content：space-between 指定项目之间的空间。另外，您需要添加额外的元素并使用不透明度将其隐藏：0。从 GoogleIcon 类中删除多余的边距。您可以使用此技巧来对齐项目。

请找到以下工作示例。我已经用class修改了className使其起作用。

.GoogleSignIn{
    border-radius: 50px;
    padding: 10px;
    text-align: center;
    align-items: center;
    width: 100%;
    height: 42px;
    font-size: 14px;
    font-weight: 500;
    background-color: white;
    border: none;
    color: black;
    margin-bottom: 10px;
    cursor: pointer;
    outline: none;
    display: flex;
    justify-content: space-between;
  
}

.GoogleIcon{
    /* margin: -40px 0px -12px -440%; */
}

.GoogleIconContainer{
    align-self: flex-end;
    display: flex;
}

.hiddenItem {
    opacity: 0;
}

<button class="GoogleSignIn">
        <div class="GoogleIconContainer">
            <img src="edit.png" class="GoogleIcon" />
        </div>
        <div class="GoogleIconText">
            Sign in with google
        </div>
        <div class="hiddenItem"> </div>
    
  </button>

编辑图标

如何在html按钮中将图标左对齐和文本居中对齐？

2 个答案:

摘要