js控制响应式垂直居中——当内容高度不定

最新推荐文章于 2023-04-03 16:21:54 发布

FE焱黑C

最新推荐文章于 2023-04-03 16:21:54 发布

阅读量654

点赞数

分类专栏： web前端js代码文章标签：响应式垂直居中当高度不定时js控制图片和文字居中

本文链接：https://blog.csdn.net/qq_36771997/article/details/77206956

版权

web前端js代码专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}

body{width: 100%;height: auto;}

/*.companyName添加min-height为了设置如果内容为单行时候的高度 */

.companyName{border-bottom:0.2vw solid #f1f1f1;min-height: 12vw; width: 100%; height: auto;position: relative;overflow: hidden; }

.placeholder:after{content: '';display: block;margin-top: 1%;}

/*利用伪元素将盒子内容撑起来，此时才能获取其盒子高度，父元素.companyName添加样式position: relative;overflow: hidden;伪元素添加样式content: '';display: block; */

.companyImg{float: left;width: 10%;height: auto; }
.companyImg img{width: 60%;margin-left: 30%; }
.companyName label{display: block;float: left;height:6vw;width: 20%; font-size: 4.5vw;margin-left: 5%;}
.companyP{display: table-cell;vertical-align: middle;width: 58%; float: right;height: 100%; margin-right: 3%;}
#companyName{min-height: 6vw;text-align: justify;height:100%;width:auto;float: right; font-size:4.5vw; display:inline-block;vertical-align: middle;}
</style>
<script type="application/javascript" src="js/jquery-2.1.0.js"></script>

window.οnlοad=window.οnresize=function(){

verticalAlign();

// 当没有加window.onresize时候，自动获取高度，设置了一个定时器，发现太过消耗内存，每隔30ms在跑函数
//setInterval(verticalAlign,30);

}

function verticalAlign(){
verticalImg(".companyName",".companyImg img");
vertical(".companyName",".companyName label");
vertical(".companyName","#companyName");

};

//文字居中的函数封装，objdiv为最外层div，当获取其高度再减去objp自身高度，除以二就为其margin-top，此时需要注意对margin-top值得取整，因为避免出现小

//数如0.5px，导致标签抖动

function vertical(objdiv,objp){
var footH= $(objdiv).css("height");
var comH = $(objp).css("height");
var topCom = parseInt((parseFloat(footH)-parseFloat(comH))/2) +'px';
$(objp).css("margin-top",topCom);

}

//获取图片居中的函数封装

function verticalImg(objdiv,objimg){
var footH= $(objdiv).css("height");
//图片height获取不到由于没设置其高度改用width ,响应式设计时设置一个width 其height自动为auto
var comH = $(objimg).css("width");
var topCom = parseInt((parseFloat(footH)-parseFloat(comH))/2) +'px';
$(objimg).css("margin-top",topCom);
}
</script>
</head>
<body>
<div class="companyName placeholder" >
<div class="companyImg">
<img src="img/submitSucc.png"/>
</div>
<label>企业名称</label>

<p class="companyP"><span id="companyName"> 业业业企企企业业企企企业业企企企业业企企企业业企企企业业企企企企企业企</span></p>
</div>
</body>

</html>

FE焱黑C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js控制响应式垂直居中——当内容高度不定

当内容不定导致盒字高度不确定时；利用伪元素方法将盒子内容撑起来，此时才能获取其盒子高度，父元素.companyName添加样式position: relative;overflow: hidden;伪元素添加样式content: '';display: block;封装函数function vertical(objdiv,objp)，objdiv为最外层div，当获取其高度再减去objp自身高度，除以二就为其margin-top，此时需要注意对margin-top值得取整，因为避免出现小数如0.5px，导致
复制链接

扫一扫