[H5]标签中内容垂直居中

[Web]学习笔记 专栏收录该内容
78 篇文章 1 订阅

一、p元素内容垂直居中

1、p元素display = "table-cell"时内容垂直居中

p {
    background-color: #fe7fac;
    width: 120px;
    height: 80px;
    display: table-cell;
    vertical-align: middle;
}

    

2、p元素display = "inline-block"时内容垂直居中

var tempTimeView = document.createElement("div");
tempTimeView.style.backgroundColor = "white";
tempTimeView.style.width = "100%";
tempTimeView.style.height = "44px";
tempTimeView.style.position = "sticky";
tempTimeView.style.top = parseFloat(tempNav.style.height) + 10 + "px";
baseDiv.appendChild(tempTimeView);

var curDate = new Date();
var timeLab = document.createElement("p");
timeLab.innerText = curDate.getFullYear()+"年";
timeLab.style.backgroundColor = "red";
timeLab.style.width = "68px";
timeLab.style.height = "20px";
timeLab.style.textAlign = "right";
timeLab.style.display = "inline-block";
timeLab.style.verticalAlign = "middle";
timeLab.style.marginTop = (parseFloat(tempTimeView.style.height) - parseFloat(timeLab.style.height))/2.0 + "px";
tempTimeView.appendChild(timeLab);

二、div元素内容垂直居中

1、div中div垂直居中

div {
    background-color: #fe7fac;
    width: 120px;
    height: 40px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

2、div中文字垂直居中

var navTitle = document.createElement("div");
navTitle.style.backgroundColor = "red";
navTitle.innerText = "技术交底";
navTitle.style.lineHeight = "44px";
navTitle.style.textAlign = "center";
listNavView.appendChild(navTitle);

 

TO:
CSS总结div中的内容垂直居中的五种方法:https://www.cnblogs.com/moqiutao/p/4807792.html

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

风浅月明

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值