css样式设置高度不定文本垂直居中_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 12:33:47
asal
1515 orang telah melayarinya

使用css实现文本垂直居中,对于支持display: table的浏览器来说,是比较容易实现的,只需要对外层div设置为table,内层div设置为table-cell,并设置文本垂直居中即可。但对于IE6/7,并不支持display:table,只能改用定位的方式来处理。外层div给一个定位,中间层div相对外层绝对定位,top为50%,内层span相对定位,top为-50%,通过正负50%的定位,使内容垂直居中。

相关演示代码(不管怎么改变div1的高度,都可以保证内容垂直居中,内容不限行数):

<!DOCTYPE HTML><html><head><title>ie中垂直居中</title><meta charset=UTF-8"><style type="text/css">.div1{    width:300px;    position:absolute;    border:1px solid #000;    top:100px;    left:200px;    display:table;}.div2{    display:table-cell;    vertical-align:middle;    *position:absolute;    *top:50%;}span{    *position:relative;    *top:-50%;}</style></head><body><div class="div1" style="height:200px">    <div class="div2">        <span>IE6/7使用定位关系来垂直居中,IE8/9使用display:table和display:table-cell</span>    </div></div></body></html>
Salin selepas log masuk

 

sumber:php.cn
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