首頁 > web前端 > css教學 > css如何垂直對齊容器中的元素

css如何垂直對齊容器中的元素

王林
發布: 2020-07-02 17:13:32
轉載
2739 人瀏覽過

css如何垂直對齊容器中的元素

可以利用CSS3的Transform來實現容​​器中的元素垂直對齊。

(推薦學習:css快速入門

具體程式碼實作:

.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
登入後複製

使用這個技巧,從單行文字、段落到box,都會垂直對齊。

目前瀏覽器對Transform的支援是需要關注的,Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9皆支援此屬性。

以上是css如何垂直對齊容器中的元素的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:juejin.im
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板