範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
你看,這段文字絕對置中了!
<div class="ts-center">
你看,這段文字絕對置中了!
</div>
概要
由於絕對置中是透過 display: flex
將元素絕對置中,這會導致子元素的排列方式變異。為了解決這個問題,請再多透過一層
<div>
等元素包覆真正的內容。
組合應用
登入頁面經常會有一個絕對置中的表單與輸入欄位,透過此元件可以讓一個容器在頁面上絕對置中。
使用者帳號
密碼
<div class="ts-center">
<div class="ts-segment" style="width: 220px">
<div class="ts-wrap is-vertical">
<div class="ts-text is-label">使用者帳號</div>
<div class="ts-input is-start-icon">
<span class="ts-icon is-user-icon"></span>
<input type="text" />
</div>
<div class="ts-text is-label">密碼</div>
<div class="ts-input is-start-icon">
<span class="ts-icon is-lock-icon"></span>
<input type="password" />
</div>
<button class="ts-button is-fluid">登入</button>
</div>
</div>
</div>