9月17日笔记

最新推荐文章于 2024-08-06 09:46:45 发布

pink124

最新推荐文章于 2024-08-06 09:46:45 发布

阅读量177

点赞数

本文链接：https://blog.csdn.net/pink124/article/details/78009027

版权

本文介绍了使用CSS实现元素垂直居中的多种方法，包括利用line-height和transform属性，并讲解了如何通过设置相对定位和绝对定位来实现文字和图片的左右布局。此外，还简单提及了一个与日期相关的定时器示例。

摘要由CSDN通过智能技术生成

一.上下垂直居中

1.inline-block 就是既可以像inline水平排列，又可以设置高宽

2.verticle-align属性只会在inline-block水平的元素上起作用，父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用

垂直居中另外一种方法：

.container {
  border: 1px solid blue;
  height: 200px; /* maybe any height */
}

.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid green;
}

3.line-height：行高设置文字间上下距离

height：高度就是定义一个层或某样东西的高度啦

二.左右居中 text-align:center

三.文字靠左图片靠右

父元素设置relative 子元素设置absolute。在通过高度计算出right:某某px，top:某某px

定时器

 
  function 
  onNew() { 
 
  var 
  currentDate = 
  new 
  Date(); 
 
  if( 
  currentDate. 
  getDate() >= 
  26){ 
 
  // console.log(currentDate.getMinutes()) 
 
  // if(currentDate.getMinutes() >= 55){ 
 
  $( 
  '.timeoff'). 
  hide(); 
 
  $( 
  '.timeon'). 
  show(); 
 
   } 
 
   }