星空网 > 软件开发 > 网页设计

css 垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*===================================*/
.d1{
height: 60px;
line-height:60px;
border:1px solid black;
}
/*===================================*/
.d2{
margin-top: 20px;
padding-top: 20px;
padding-bottom: 20px;
border:1px solid black;
}

.warp{
margin-top: 20px;
display: table;
border: 1px solid yellow;
height: 400px;
width: 300px;
}
.d3{
vertical-align: middle;
display: table-cell;
border: 1px solid green;
}
/*===================================*/
.outer{
margin-top: 20px;
display: table;
border: 1px solid red;
height: 600px;
width: 300px;
overflow: hidden;
*position: relative;
background-color:green\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/
*background-color:#dddd00; /* ie 7*/
_background-color:#CDCDCD; /* ie 6*/
}
.inner{
vertical-align: middle;
display: table-cell;
/*border: 1px solid black;*/
/*text-align: left;*/
*position: absolute;
*top:50%;
}
.content{
*position: relative;
*top:-50%;
}
/*===================================*/

</style>
</head>
<body>
<div >1:我是单行垂直居中,原理:height: 60px === line-height:60px </div>
<div >2:多行未知高度文字的垂直居中,原理:padding-top: 20px; === padding-bottom: 20px;</div>
<div >
<div >
3;多行文本固定高度的居中,原理,:
父元素样式:display: table;height: 400px;
子元素样式:vertical-align: middle;display: table-cell;
<span >
Internet Explorer 6,7 并不能正确地理解display:table和display:table-cell,
Internet Explorer 6,7 及以下的版本中是无效的
</span>
</div>
</div>
<div >
<div >
<div >
<span >
Internet Explorer 6,7 并不能正确地理解display:table和display:table-cell,
Internet Explorer 6,7 及以下的版本中是无效的<br/>
</span>
兼容Internet Explorer 6,7:多行文本固定高度的居中
<br/>
.outer{
margin-top: 20px;
display: table;
border: 1px solid red;
height: 300px;
width: 300px;
overflow: hidden;
*position: relative;
}<br/>
.inner{
vertical-align: middle;
display: table-cell;
/*border: 1px solid black;*/
/*text-align: left;*/
*position: absolute;
*top:50%;
}
</div>
</div>
</div>
<!-- 以下内容不知道怎么回事,达不到左对齐
  <div >
    <div >
      <div id="content">
兼容Internet Explorer 6:多行文本固定高度的居中
      </div>
    </div>
  </div>
-->

</body>
</html>




原标题:css 垂直居中

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Shopee越南站点:SLS-Standard Express渠道运费下调!:https://www.ikjzd.com/articles/112261
亚马逊2020产品开发必备工具是什么?:https://www.ikjzd.com/articles/112262
干货:如何通过秒杀来打造你的亚马逊排名?:https://www.ikjzd.com/articles/112263
卖家注意!亚马逊印度已停用“search-seeding”工具!:https://www.ikjzd.com/articles/112264
至2020年3月31日:Shopee延长SLS物流暂免体积重计费政策!:https://www.ikjzd.com/articles/112265
亚马逊仓库停止收货了怎么办?该补货还是得补货!:https://www.ikjzd.com/articles/112266
37号文今后是否会更新?一文详解关键信息 :https://www.kjdsnews.com/a/1836441.html
探讨内地人开设香港账户的可行性 :https://www.kjdsnews.com/a/1836442.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流