将 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
, 即可访问特定定制版 ApplicationPARTNER_NAME=xxx
报错解决
项目里, 控制台, alert, API 的报错都特别多
登录账号后, 点击 start 按钮, 之后会出现 alert 报错
An unknown error occurred. Please try reloading and trying again.
这个是由于数据库里的我的账号的数据上, 缺少了一个字段 (比较久远的边缘功能的字段)