圖片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中圖片能夠是任何塊元素）

時間 2019-11-13

標籤圖片水平垂直居中兼容 ie6 ie7 firefox opera safari 其中能夠任何元素欄目瀏覽器简体版

原文原文鏈接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">css

<head>ui

<title>圖片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中圖片能夠是任何塊元素）</title>xml

.boxout{width:600px; height:300px; display:table; border:1px solid #000; background-color:#CCCCCC; float:left;}圖片

.boxin{display:table-cell; vertical-align:middle; text-align:center;}ip

/*for IE*/utf-8

.boxout{*position:relative;}get

.boxin{*width:100%;*position:absolute; *top:50%; *left:0;}

.boxout p{*position: relative; *top:-50%; *margin:0; *padding:0;}

.boxout img{ *margin-top:2px;}/*for IE　圖片4像素空白bag*/

</style>

</head>

<body>

</div>

</body>

相關標籤/搜索