How to align icon left and text centred in a html button?

user_11914355 0
Viewed 5618

How can you have a button with an icon that is aligned left (far left in the button) and the text still centred in the button?

.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>

css html
2 Answers

5 lines of CSS code and extra span (For the text). ** Also useful for navbar layout (left logo & center menu).

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

"The trick": set flex-item-1 margin-right: auto (Now flex-item-2 move to the right edge "push effect").

Next, use one more margin-right: auto for flex-item-2 ("push to the right perfectly center")

enter image description here

snippet

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 To get "perfect V/H align" Do not add any extra top/bottom margin/padding for the content inside the button - icon -or- the text ("Famous" mistake).

important-2 Remove button fixed height (Avoid overflow-y issues). The height of the button declares by content (font-size, image) & padding/border (box-model).

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>

Done :)

Related (Extra reading):

user_92915570

As your using display:flex property in the GoogleSignIn button you can use justify-content: space-between to specify space between the items. Also you need to add extra element and hide it using opacity: 0. Remove extra margin from GoogleIcon class. You can use this trick to align the items.

Please find below working example. I have modified className with class to make it work.

.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>

Edit Icon enter image description here

user_122495670
Related