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

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

王林
Lepaskan: 2020-07-02 17:13:32
ke hadapan
2738 orang telah melayarinya

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

可以利用CSS3的Transform来实现容器中的元素垂直对齐。

(推荐学习:css快速入门

具体代码实现:

.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
Salin selepas log masuk

使用这个技巧,从单行文本、段落到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!

Label berkaitan:
sumber:juejin.im
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan