From d4cd576586e5ccae559b64df39960804205b65fb Mon Sep 17 00:00:00 2001
From: syy11cn <syy11cn@outlook.com>
Date: Sun, 24 Oct 2021 01:03:44 +0800
Subject: [PATCH] docs: add align center

---
 README.CN.MD | 30 +++++++++++++++---------------
 README.md    | 30 +++++++++++++++---------------
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/README.CN.MD b/README.CN.MD
index fdf4e35..ad90f35 100644
--- a/README.CN.MD
+++ b/README.CN.MD
@@ -1,4 +1,4 @@
-<center>
+<div align=center>
 <h1>🎉 Config Router 🎉</h1>
 
 ![English](https://img.shields.io/static/v1?label=current&message=简体中文&color=brightgreen) [![English](https://img.shields.io/static/v1?label=docs&message=English&color=lightgrey&logo=markdown)](./README.MD)
@@ -7,34 +7,34 @@
 
 <p style="color: gray;">一个基于 React Router v5.x 的路由配置、渲染和路由守卫库。</p>
 
-</center>
+</div>
 
-<center>
+<div align=center>
 
 ## `Config Router` 是什么? :thinking:
 
-</center>
+</div>
 
 **Config Router** :wave: 是一个配合 _React Router v5.x_ 使用的路由管理工具。 在 _React Router_ 的基础上，提供 **路由集中配置、路由渲染以及路由守卫** 功能。
 
 如果你曾使用过 _Vue Router_，你将很容易就能上手使用 _Config Router_。当然，本项目不如 _Vue Router_ 那样成熟。:joy:
 
-<center>
+<div align=center>
 
 ## 功能 :tada:
 
-</center>
+</div>
 
 - :heavy_check_mark: 通过声明类似 Vue Router 中 `routes` 数组的方式 **配置路由**。
 - :heavy_check_mark: 通过 `import` 一个 `RouterView` 组件的方式 **渲染路由** :eyes:。
 - :heavy_check_mark: 渲染页面前，支持自定义 **路由守卫**。
 - :o: 敬请期待……
 
-<center>
+<div align=center>
 
 ## 使用方法 :book:
 
-</center>
+</div>
 
 你可以将这个包用于 `react-jsx` 或 `react-tsx` 项目中。在下面的使用方法中，将以 `vite` + `react` + `typescript` 搭建的项目为例。
 
@@ -171,7 +171,7 @@ interface AppProps {}
 
 const App: FunctionComponent<AppProps> = () => {
   return (
-    <div className="App">
+    <div align=center className="App">
       <Header></Header>
       <Content>
         <RouterView
@@ -211,7 +211,7 @@ interface IndexProps {
 const Index: FunctionComponent<IndexProps> = ({ routes, props }) => {
   console.log('Index View');
   return (
-    <div>
+    <div align=center>
       <h1>This is Index</h1>
       <RouterView
         routes={routes}
@@ -254,7 +254,7 @@ interface IndexProps {
 const Index: FunctionComponent<IndexProps> = ({ routes, props }) => {
   console.log('Index View');
   return (
-    <div>
+    <div align=center>
       <h1>This is Index</h1>
       <RouterView
         routes={routes}
@@ -275,21 +275,21 @@ export default Index;
 
 在这种情况下，当用户想要访问 `/home/test` 时，对应的路由和组件将被渲染。而当用户想要访问 `/home` 或其他以 `/home` 开头的域名时，其将被重定向到 `404` 页面。
 
-<center>
+<div align=center>
 
 ## 贡献 :computer:
 
-</center>
+</div>
 
 欢迎贡献！你可以 fork 这个仓库，然后提 PR。
 
 在使用中有任何问题，也可以 [点击这里发布一个 issue](https://github.com/syy11cn/config-router/issues)，我收到消息后会尽快尽力处理。
 
-<center>
+<div align=center>
 
 ## 关于 :raised_hands:
 
-</center>
+</div>
 
 ### 开源协议
 
diff --git a/README.md b/README.md
index 698ad48..24f76cc 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-<center>
+<div align=center>
 
 # 🎉 Config Router 🎉
 
@@ -8,34 +8,34 @@
 
 <p style="color: gray;">A route configuring, rendering and guarding lib based on React Router v5.x.</p>
 
-</center>
+</div>
 
-<center>
+<div align=center>
 
 ## Why Config Router? :thinking:
 
-</center>
+</div>
 
 **Config Router** :wave: is an attachment lib to _React Router v5.x_. It works well with React Router, helping with **route configuration, route rendering and route guarding**.
 
 If you are a _Vue Router_ user before, it is quite easy for you to get started. Of course this project is not as mature as _Vue Router_. :joy:
 
-<center>
+<div align=center>
 
 ## Features :tada:
 
-</center>
+</div>
 
 - :heavy_check_mark: **Config route** by declaring the routes array like that in Vue Router.
 - :heavy_check_mark: **Render routes** by importing and using a single component called **`RouterView`** :eyes:.
 - :heavy_check_mark: **Guard routes** that should be accessed only by authorized users.
 - :o: More is on the way...
 
-<center>
+<div align=center>
 
 ## Usage :book:
 
-</center>
+</div>
 
 You can use this package in either `react-jsx` projects or `react-tsx` projects. Take project with `vite`, `react` and `typescript` for example.
 
@@ -172,7 +172,7 @@ interface AppProps {}
 
 const App: FunctionComponent<AppProps> = () => {
   return (
-    <div className="App">
+    <div align=center className="App">
       <Header></Header>
       <Content>
         <RouterView
@@ -212,7 +212,7 @@ interface IndexProps {
 const Index: FunctionComponent<IndexProps> = ({ routes, props }) => {
   console.log('Index View');
   return (
-    <div>
+    <div align=center>
       <h1>This is Index</h1>
       <RouterView
         routes={routes}
@@ -255,7 +255,7 @@ interface IndexProps {
 const Index: FunctionComponent<IndexProps> = ({ routes, props }) => {
   console.log('Index View');
   return (
-    <div>
+    <div align=center>
       <h1>This is Index</h1>
       <RouterView
         routes={routes}
@@ -276,21 +276,21 @@ export default Index;
 
 In this situation, when a user want to access `/home/test`, corresponding route and component would be rendered. When accessing `/home` or other routes begin with `/home`, the user would be redirect to a `404` page.
 
-<center>
+<div align=center>
 
 ## Contribution :computer:
 
-</center>
+</div>
 
 Contributions are welcome. Just fork this repo and send PRs.
 
 Any questions while using this package, please open an [issue](https://github.com/syy11cn/config-router/issues) and I would manage to solve it as soon as I receive the message.
 
-<center>
+<div align=center>
 
 ## About :raised_hands:
 
-</center>
+</div>
 
 ### License