元素垂直居中与hover失效

淩亂°似流年 2022-08-13 12:36 254阅读 0赞

**1. 垂直居中**  
  
 1) position: absolute  
2) left: 50%; margin-left: 负的 元素一半宽度;  
3) top: 50%; margin-top: 负的 元素一半高度;  
4) 该元素的直接父级, position: relative  
5) 参考: http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html  
  
**2. hover失效**  
  
 1) 原因: 通过JS更改style, 优先级比较高  
2) 解决: 在hover中的规则中, 添加 !important , 提升hover中规则的权重

**3. 示例**

**![Center][]**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>垂直居中与hover失效</title>
      
    <style>
      
      * {padding: 0; margin: 0;}
      .commonTable { border-collapse: collapse;}
      .commonTable th { background-color: #eeeeee;}
      .commonTable td, .commonTable th { font-size: 12px; border: solid 1px #c0c0c0; width: 100px; line-height: 20px; text-align: center; padding: 4px; }
       
      /* 使用 !important 解决被覆盖的问题 */
      .commonTable tr:hover {
        background-color: #f3f6fa!important;
      } 
      
      /* 445*175尺寸的元素 页面居中处理, 兼容所有浏览器, 随浏览器变化而变化  */
      .commonTable { 
        position: absolute; 
        top: 50%; 
        left: 50%;
        margin-left: -222px;
        margin-top: -87px;
      }
    
    </style>
    <script>
      window.onload = function() {
    
        var allTrElements = document.getElementById("commonTable").getElementsByTagName("tr");
        for (var i = 0; i < allTrElements.length; i++) {
          allTrElements[i].onclick = function() {
            for (var i = 1; i < allTrElements.length; i++) {
              allTrElements[i].style.backgroundColor = "white";
            };
            this.style.backgroundColor = "#f3f6fa";
          }
        }
        
      }
    </script>
    </head>
    <body>
      
      <table class="commonTable" id="commonTable">
        <tr class="columnNameRow">
            <th>序号</th> <th>业务类型</th> <th>姓名</th> <th>身份证号码</th>
        </tr>
        <tr class="contentRow">
            <td>1</td> <td>证件办理</td> <td>张三三</td> <td>123456789012345678</td>
        </tr>
        <tr class="contentRow">
            <td>2</td> <td>证件办理</td> <td>张三三</td> <td>123456789012345678</td>
        </tr>
        <tr class="contentRow">
            <td>3</td> <td>证件办理</td> <td>张三三</td> <td>123456789012345678</td>
        </tr>
        <tr class="contentRow">
            <td>4</td> <td>证件办理</td> <td>张三三</td> <td>123456789012345678</td>
        </tr>
        <tr class="contentRow">
            <td>5</td> <td>证件办理</td> <td>张三三</td> <td>123456789012345678</td>
        </tr>
        
      </table>
      
    </body>
    
    </html>

[Center]: /images/20220810/a459b48ad86d42e88c52596ed52ae434.png