将按钮中的文本居中，但同一按钮的视觉图标左对齐？

Question

我需要设计一个看起来像这样的按钮：

这是我目前拥有的：

我无法解决的两件事：

1. 如何将那个点与左侧对齐？
2. 如何使文本居中，同时点还在那里？

.login-button {
    width: 85%;
}

.dot {
    height: 20px;
    width: 20px;
    background-color: #003920;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 3px;
}
.center-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="center-button">
<button mat-stroked-button color="primary" class="login-button" (click)="loginWithGoogle()">
    <span class="dot"></span> Login with Google</button>

Answer 1

也许 float: left 是您要找的？

此外，这会将文本稍微向右推。

您可以将文本放在一个跨度内，并添加一些与圆圈宽度相等的正确填充，这将使其居中。

<span style="padding-right: 20px;">Login with Google</span>

.login-button {
    width: 85%;
}

.dot {
    height: 20px;
    width: 20px;
    background-color: #003920;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 3px;
    float: left;
}
.center-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

<div class="center-button">
<button mat-stroked-button color="primary" class="login-button" (click)="loginWithGoogle()">
    <span class="dot"></span><span style="padding-right: 20px;">Login with Google</span></button>

Answer 2

在编写这样的代码时，我倾向于将布局决策交给父元素（此处为 login btn ）​​，而子元素应该只指定它们的宽度并让父元素处理放置。 （这正是我喜欢的方式。没有硬性规定。）

所以你可以这样做：

.login-button {
  width: 85%;
  display: flex;
  align-items: center;
}

.dot {
  height: 20px;
  width: 20px;
  background-color: #003920;
  border-radius: 50%;
  margin-bottom: 3px;
}

.text {
  flex: auto 1 1;
  text-align: center;
}

<div class="center-button">
  <button mat-stroked-button color="primary" class="login-button" (click)="loginWithGoogle()">
<span class="dot"></span> <span class="text">Login with Google</span></button>
</div>

Answer 3

给按钮一个 position: relative，给点一个 position:absolute。还将高度和宽度更改为 1em 以适应行高。

.login-button {
  width: 85%;
  position: relative;
}

.dot {
  height: 1em;
  width: 1em;
  background-color: #003920;
  border-radius: 50%;
  position: absolute;
  left: 2px;
  top: 2px;
}

.center-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="center-button">
  <button mat-stroked-button color="primary" class="login-button" (click)="loginWithGoogle()">
    <span class="dot"></span> Login with Google</button>