如何在Angular中创建可正常使用且居中显示的Google登录按钮

现有代码存在3个核心错误：

• 行内样式语法错误：border:none; width:110px; height:40px; border-radius:3% 这些CSS属性没有包裹在style属性中，属于无效标签属性
• 按钮宽度设置过小：110px的宽度不足以容纳谷歌图标+「Continue with Google」文本，会导致内容溢出、布局错乱
• 缺少居中布局的相关样式配置

推荐把样式统一放到组件样式文件中维护，不要写行内样式，可维护性更高。

1. login.component.html 代码 #

<button 
  class="btn btn-block google-sign-in" 
  (click)="signInHandler()"
>
  <img [src]="'assets/images/google.svg'" alt="google"/>
  <span>Continue with Google</span>
</button>

2. login.component.css 代码 #

/* 按钮基础样式 */
.google-sign-in {
  border: none;
  /* 宽度可根据需求调整，fit-content为自适应内容宽度，固定宽度可设为240px */
  width: fit-content;
  height: 40px;
  border-radius: 4px;
  /* 按钮内部元素水平对齐 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  cursor: pointer;
}

/* 适配谷歌图标尺寸 */
.google-sign-in img {
  width: 18px;
  height: 18px;
}

/* 页面居中配置：给按钮的父容器加如下样式，本示例父容器为login组件根元素 */
:host {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 占满视口高度，可根据实际页面布局调整 */
  min-height: 100vh;
}

如果确实需要写行内样式，正确的写法是把所有CSS属性包裹在style属性中，示例：

<button style="border:none; width:240px; height:40px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; gap:8px;" (click)="signInHandler()">

内容的提问来源于stack exchange，提问作者ingmbk