台灣正體

絕對置中

垂直與水平置中其子元素。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
你看,這段文字絕對置中了!
<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>
組合應用
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標