How do I style/center text a google sign in button?-CodePudding

I would like to have my google sign in button resemble the one I have linked here, but i'm having issues trying to center both the text and the icon exactly in line with each other. What would I have to add/change?

.content{
    display: grid;
    place-items: center;
    padding: 10px;
    padding-left: 60px;
    padding-right: 60px;
    width: fit-content;
    border: 1px solid gray;
    border-radius: 20px;
    transition: 0.5s;
}

.content:hover{
    cursor: pointer;
    background-color: honeydew;
}

<button > 
           <span> <img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="google"/> 
            Sign up Using Google</span>
        </button>

This is the desired result ^

CodePudding user response：

Flexbox is a good display layout for this.

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  padding-left: 60px;
  padding-right: 60px;
  width: fit-content;
  border: 1px solid gray;
  border-radius: 20px;
  transition: 0.5s;
}

.content:hover {
  cursor: pointer;
  background-color: honeydew;
}

img {
  padding-right: 0.25rem;
}

<button > 
    <img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="google"/>
    <span>Sign up Using Google</span>
</button>

CodePudding user response：

.content{
    display: grid;
    place-items: center;
    padding: 10px;
    padding-left: 60px;
    padding-right: 60px;
    width: fit-content;
    border: 1px solid gray;
    border-radius: 20px;
    transition: 0.5s;
}

.content img{
  vertical-align:bottom;
}

.content:hover{
    cursor: pointer;
    background-color: honeydew;
}

<button > 
           <span> <img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="google"/> 
            Sign up Using Google</span>
        </button>