如何在按钮中放置一个图标并使其靠左对齐(即在按钮的最左侧),同时文本仍保持居中对齐?
.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>