diff --git a/templates/admin/config.tmpl b/templates/admin/config.tmpl
index a61dec9620..6dc6e0d5ea 100644
--- a/templates/admin/config.tmpl
+++ b/templates/admin/config.tmpl
@@ -223,7 +223,7 @@
 					<dt>{{ctx.Locale.Tr "admin.config.mailer_user"}}</dt>
 					<dd>{{if .Mailer.User}}{{.Mailer.User}}{{else}}(empty){{end}}</dd>
 					<div class="divider"></div>
-					<dt class="tw-py-1 tw-flex tw-items-center">{{ctx.Locale.Tr "admin.config.send_test_mail"}}</dt>
+					<dt class="flex-text-block tw-py-1">{{ctx.Locale.Tr "admin.config.send_test_mail"}}</dt>
 					<dd class="tw-py-0">
 						<form class="ui form ignore-dirty" action="{{AppSubUrl}}/-/admin/config/test_mail" method="post">
 							<div class="ui tiny input">
@@ -254,7 +254,7 @@
 					<dd>{{.CacheItemTTL}}</dd>
 				{{end}}
 				<div class="divider"></div>
-				<dt class="tw-py-1 tw-flex tw-items-center">{{ctx.Locale.Tr "admin.config.cache_test"}}</dt>
+				<dt class="flex-text-block tw-py-1">{{ctx.Locale.Tr "admin.config.cache_test"}}</dt>
 				<dd class="tw-py-0">
 					<form class="ui form ignore-dirty" action="{{AppSubUrl}}/-/admin/config/test_cache" method="post">
 						<button class="ui tiny primary button">{{ctx.Locale.Tr "test"}}</button>
diff --git a/templates/admin/repo/unadopted.tmpl b/templates/admin/repo/unadopted.tmpl
index 54b76c08bc..e66add6ce8 100644
--- a/templates/admin/repo/unadopted.tmpl
+++ b/templates/admin/repo/unadopted.tmpl
@@ -20,7 +20,7 @@
 				{{if .Dirs}}
 					<div class="ui aligned divided list">
 						{{range $dirI, $dir := .Dirs}}
-							<div class="item tw-flex tw-items-center">
+							<div class="item flex-text-block">
 								<span class="tw-flex-1"> {{svg "octicon-file-directory-fill"}} {{$dir}}</span>
 								<div>
 									<button class="ui button primary show-modal tw-p-2" data-modal="#adopt-unadopted-modal-{{$dirI}}">{{svg "octicon-plus"}} {{ctx.Locale.Tr "repo.adopt_preexisting_label"}}</button>
diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl
index 28fcee023f..43cbcbdc0c 100644
--- a/templates/base/head_navbar.tmpl
+++ b/templates/base/head_navbar.tmpl
@@ -151,8 +151,8 @@
 	{{$activeStopwatch := and .PageGlobalData (call .PageGlobalData.GetActiveStopwatch)}}
 	{{if $activeStopwatch}}
 		<div class="active-stopwatch-popup tippy-target">
-			<div class="tw-flex tw-items-center tw-gap-2 tw-p-3">
-				<a class="stopwatch-link tw-flex tw-items-center tw-gap-2 muted" href="{{$activeStopwatch.IssueLink}}">
+			<div class="flex-text-block tw-p-3">
+				<a class="stopwatch-link flex-text-block muted" href="{{$activeStopwatch.IssueLink}}">
 					{{svg "octicon-issue-opened" 16}}
 					<span class="stopwatch-issue">{{$activeStopwatch.RepoSlug}}#{{$activeStopwatch.IssueIndex}}</span>
 				</a>
diff --git a/templates/org/header.tmpl b/templates/org/header.tmpl
index 040164ba86..31f43449ab 100644
--- a/templates/org/header.tmpl
+++ b/templates/org/header.tmpl
@@ -7,7 +7,7 @@
 				{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
 				{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
 			</span>
-			<span class="tw-flex tw-items-center tw-gap-1 tw-ml-auto tw-text-16 tw-whitespace-nowrap">
+			<span class="flex-text-inline tw-ml-auto tw-text-16 tw-whitespace-nowrap">
 				{{if .EnableFeed}}
 					<a class="ui basic label button tw-mr-0" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
 						{{svg "octicon-rss" 24}}
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index ea294980e0..ab088ce7b2 100644
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -49,7 +49,7 @@
 				{{if .NumMembers}}
 					<h4 class="ui top attached header tw-flex">
 						<strong class="tw-flex-1">{{ctx.Locale.Tr "org.members"}}</strong>
-						<a class="tw-text-text-light tw-flex tw-items-center" href="{{.OrgLink}}/members"><span>{{.NumMembers}}</span> {{svg "octicon-chevron-right"}}</a>
+						<a class="tw-text-text-light flex-text-inline" href="{{.OrgLink}}/members"><span>{{.NumMembers}}</span> {{svg "octicon-chevron-right"}}</a>
 					</h4>
 					<div class="ui attached segment members">
 						{{$isMember := .IsOrganizationMember}}
@@ -63,7 +63,7 @@
 				{{if .IsOrganizationMember}}
 					<div class="ui top attached header tw-flex">
 						<strong class="tw-flex-1">{{ctx.Locale.Tr "org.teams"}}</strong>
-						<a class="tw-text-text-light tw-flex tw-items-center" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right"}}</a>
+						<a class="tw-text-text-light flex-text-inline" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right"}}</a>
 					</div>
 					<div class="ui attached table segment teams">
 						{{range .Teams}}
diff --git a/templates/org/settings/labels.tmpl b/templates/org/settings/labels.tmpl
index 21d7c0ef3c..283b2199cb 100644
--- a/templates/org/settings/labels.tmpl
+++ b/templates/org/settings/labels.tmpl
@@ -1,6 +1,6 @@
 {{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings labels")}}
 <div class="org-setting-content">
-	<div class="tw-flex tw-items-center">
+	<div class="flex-text-block">
 		<div class="tw-flex-1">
 			{{ctx.Locale.Tr "org.settings.labels_desc"}}
 		</div>
diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 593b9d454d..5e0d07ed6d 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -71,7 +71,7 @@
 		{{end}}
 
 		<h4 class="ui top attached header tw-flex tw-items-center tw-justify-between">
-			<div class="tw-flex tw-items-center">
+			<div class="flex-text-block">
 				{{ctx.Locale.Tr "repo.branches"}}
 			</div>
 		</h4>
diff --git a/templates/repo/commits_table.tmpl b/templates/repo/commits_table.tmpl
index c8ae535a18..8f6e6e0169 100644
--- a/templates/repo/commits_table.tmpl
+++ b/templates/repo/commits_table.tmpl
@@ -1,5 +1,5 @@
 <h4 class="ui top attached header commits-table tw-flex tw-items-center tw-justify-between">
-	<div class="commits-table-left tw-flex tw-items-center">
+	<div class="commits-table-left flex-text-block">
 		{{if or .PageIsCommits (gt .CommitCount 0)}}
 			{{.CommitCount}} {{ctx.Locale.Tr "repo.commits.commits"}}
 		{{else if .IsNothingToCompare}}
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 41a8268cb3..3a152a7e81 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -1,7 +1,7 @@
 {{$showFileTree := (and (not .DiffNotAvailable) (gt .DiffShortStat.NumFiles 1))}}
 <div>
 	<div class="diff-detail-box">
-		<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-2 tw-ml-0.5">
+		<div class="flex-text-block tw-flex-wrap tw-ml-0.5">
 			{{if $showFileTree}}
 				<button class="diff-toggle-file-tree-button not-mobile btn interact-fg" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}">
 					{{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
diff --git a/templates/repo/diff/new_review.tmpl b/templates/repo/diff/new_review.tmpl
index 1ef32c1d8a..b290da8e9d 100644
--- a/templates/repo/diff/new_review.tmpl
+++ b/templates/repo/diff/new_review.tmpl
@@ -13,7 +13,7 @@
 	<div class="ui segment">
 		<form class="ui form form-fetch-action" action="{{.Link}}/reviews/submit" method="post">
 			<input type="hidden" name="commit_id" value="{{.AfterCommitID}}">
-			<div class="field tw-flex tw-items-center">
+			<div class="field flex-text-block">
 				<div class="tw-flex-1">{{ctx.Locale.Tr "repo.diff.review.header"}}</div>
 				<a class="muted close">{{svg "octicon-x" 16}}</a>
 			</div>
diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl
index 996afeae71..9600752036 100644
--- a/templates/repo/issue/card.tmpl
+++ b/templates/repo/issue/card.tmpl
@@ -16,7 +16,7 @@
 			</div>
 			<a class="issue-card-title muted issue-title tw-break-anywhere" href="{{.Link}}">{{.Title | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
 			{{if and $.isPinnedIssueCard $.Page.IsRepoAdmin}}
-				<a role="button" class="issue-card-unpin muted tw-flex tw-items-center" data-tooltip-content={{ctx.Locale.Tr "repo.issues.unpin"}} data-issue-id="{{.ID}}" data-unpin-url="{{$.Page.Link}}/unpin/{{.Index}}">
+				<a role="button" class="issue-card-unpin muted flex-text-inline" data-tooltip-content={{ctx.Locale.Tr "repo.issues.unpin"}} data-issue-id="{{.ID}}" data-unpin-url="{{$.Page.Link}}/unpin/{{.Index}}">
 					{{svg "octicon-x" 16}}
 				</a>
 			{{end}}
diff --git a/templates/repo/issue/view_content/attachments.tmpl b/templates/repo/issue/view_content/attachments.tmpl
index 86be494366..30a5db89f7 100644
--- a/templates/repo/issue/view_content/attachments.tmpl
+++ b/templates/repo/issue/view_content/attachments.tmpl
@@ -18,7 +18,7 @@
 					<span><strong>{{.Name}}</strong></span>
 				</a>
 			</div>
-			<div class="tw-p-2 tw-flex tw-items-center">
+			<div class="flex-text-block tw-p-2">
 				<span class="ui tw-text-text-light">{{.Size | FileSize}}</span>
 			</div>
 		</div>
diff --git a/templates/repo/migrate/migrate.tmpl b/templates/repo/migrate/migrate.tmpl
index 79ac5cc8a1..93119b3e0e 100644
--- a/templates/repo/migrate/migrate.tmpl
+++ b/templates/repo/migrate/migrate.tmpl
@@ -5,7 +5,7 @@
 			{{template "repo/migrate/helper" .}}
 			<div class="ui cards migrate-entries">
 				{{range .Services}}
-					<a class="ui card migrate-entry tw-flex tw-items-center" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
+					<a class="ui card migrate-entry flex-text-block" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
 						{{if eq .Name "github"}}
 							{{svg "octicon-mark-github" 184 "tw-p-4"}}
 						{{else if eq .Name "gitlab"}}
diff --git a/templates/shared/user/org_profile_avatar.tmpl b/templates/shared/user/org_profile_avatar.tmpl
index dc7a5e0bd6..99e170af23 100644
--- a/templates/shared/user/org_profile_avatar.tmpl
+++ b/templates/shared/user/org_profile_avatar.tmpl
@@ -2,7 +2,7 @@
 	<div class="ui container">
 		<div class="ui vertically grid head">
 			<div class="column">
-				<div class="ui header tw-flex tw-items-center tw-break-anywhere">
+				<div class="ui header flex-text-block tw-break-anywhere">
 					{{ctx.AvatarUtils.Avatar . 100}}
 					<span class="tw-text-text-light"><a class="muted" href="{{.HomeLink}}">{{.DisplayName}}</a></span>
 					<span class="org-visibility">
diff --git a/templates/webhook/new.tmpl b/templates/webhook/new.tmpl
index 8ef33df25b..b83499aa9c 100644
--- a/templates/webhook/new.tmpl
+++ b/templates/webhook/new.tmpl
@@ -1,7 +1,7 @@
 <h4 class="ui top attached header">
 	{{.CustomHeaderTitle}}
 	<div class="ui right type dropdown">
-		<div class="text tw-flex tw-items-center">
+		<div class="text flex-text-inline">
 			{{template "shared/webhook/icon" (dict "Size" 20 "HookType" .ctxData.HookType)}}
 			{{ctx.Locale.Tr (print "repo.settings.web_hook_name_" .ctxData.HookType)}}
 		</div>