Skip to main content

将 Title 在有 Icon 元素的 Header 里垂直水平居中

目标样式​

在一个 Container 里, 左边是一个 Arrow Icon, 右边是一个子 Container 包裹的 Title

要求 Title 永远在整个外层 Container 的正中央, 而不是子 Container 的正中央

 +----------------------------------------------+
 |      Indications based on the Specified      |
 |  <                                           |
 |         Commercial Transactions Law          |
 +----------------------------------------------+

现在的 HTML 结构:

<div class="header-container">
  <div class="back-arrow"><</div>
  <div class="title-container">
    <div class="header-title">
      Indications based on the Specified Commercial Transactions Law
    </div>
  </div>
</div>

样式实现​

要让 Title 在外层 Container 中居中, 就不能简单用 Flex 布局来解决了,

而需要将其 脱离文档流 来处理,

不然就需要用 JS 获取画面大小对样式进行调整

能用 CSS 解决的, 就肯定不能用 JS 来组合实现, 因为性能较差的同时, 可维护性也更差, 这样做大概率不是最佳实践

先给出 SCSS 的完整实现代码:

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.title-container {
  /* 让元素相对于父元素真正居中（水平 & 垂直） */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 72px = Icon 的宽度 + 外层 Container 的左右两边的 Padding */
  width: calc(100% - 72px);
}

.header-title {
  text-align: center;
}

水平&垂直方向上居中​

.title-container {
  /* 让元素相对于父元素真正居中（水平 & 垂直） */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

  • position: absolute;

    让元素相对于 最近的 position: relative; 父元素 进行定位。

  • top: 50%; left: 50%;

    让元素的 左上角（左上角的坐标点） 先移动到父元素的 50% 位置（即中心）。

  • transform: translate(-50%, -50%);

    由于 top: 50%; left: 50%; 是以 元素的左上角为基准，所以元素的实际位置会偏移。

    translate(-50%, -50%) 让 自身的中心点 也移动到这个 50% 的位置，达到真正的居中。

启动项目过程中, 遇到的一些小问题​

切换到特定定制版 Application

在环境变量中将 PARTNER_NAME 赋值为 xxx, 即可访问特定定制版 Application

PARTNER_NAME=xxx

报错解决

项目里, 控制台, alert, API 的报错都特别多

登录账号后, 点击 start 按钮, 之后会出现 alert 报错 An unknown error occurred. Please try reloading and trying again.

这个是由于数据库里的我的账号的数据上, 缺少了一个字段 (比较久远的边缘功能的字段)