Rumah  >  Artikel  >  hujung hadapan web  >  css如何垂直对齐容器中的元素

css如何垂直对齐容器中的元素

王林
王林ke hadapan
2020-07-02 17:13:322715semak imbas

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均支持该属性。

Atas ialah kandungan terperinci css如何垂直对齐容器中的元素. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:juejin.im. Jika ada pelanggaran, sila hubungi admin@php.cn Padam