代码之家 › 专栏 › 技术社区 › BobbyJones

如何居中css菜单死点(流体样式)[重复]

css html

BobbyJones · 技术社区 · 6 年前

我真的需要你的帮助,

我如何才能将css菜单的死点(垂直和水平)定位在用户屏幕的中间。(我们假设不同的人使用不同的屏幕分辨率)因此,我将寻找一个流动的示例。

下面是有问题的CSS和HTML标记:

<!DOCTYPE html>
    
    <html>
    
    <head>
    
    <style type="text/css">
    * {
    	font-family: Verdana,Arial,sans-serif;
    	font-size: 9pt;
    }
    body {
    	background: rgb(105,105,105);
    }
    </style>
    
    <style type="text/css">
    .tabs {
      position: relative;   
      min-height: 292px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    color:#7c7766;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: rgb(105,105,105);
      padding: 10px; 
      border: 0px solid #787265; 
      margin-left: -1px; 
      position: relative;
      left: 1px;
      color: #FFF;
    }
    
    .tab label:hover {
      background: #d7d3c3; 
      padding: 10px; 
      border: 0px solid #787265; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
      cursor: pointer;
    }
    
    .tab [type=radio] {
      display: none;   
    }
    .content {
      position: absolute;
      top: 25px;
      left: 0;
      background: #f5f1e6;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 0px solid #787265; 
    }
    [type=radio]:checked ~ label {
      background: #f5f1e6;
      border-bottom: 0px solid white;
      z-index: 2;
      color: #000;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    </style>
    
    <body>
    
    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>
           
           <div class="content">
               stuff 1
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>
           
           <div class="content">
               stuff 2
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>
         
           <div class="content">
               stuff 3
           </div> 
       </div>
        
    </div>
    
    </body>
    
    </html>

2 回复 | 直到 6 年前

Ian Craddock 6 年前

您可以使用下面的css将元素居中。

.tabs{
    position: absolute;
    top: 50%;
    left: 50%;
    translate(-50%, -50%);
}

虽然我可能会把它放在一个包装里,然后把你所有的。选项卡中的标记,以便不必更改任何现有标记。

<div class="wrapper">
    <div class="tabs">
        <!-- Rest of your markup -->
    </div>
</div>


.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    translate(-50%, -50%);
}

Stradosphere 6 年前

你可以试试这样的。。。我添加了宽度以说明居中

 <div class="tabs" style="width:500px;margin-top:30%;margin-left:auto;margin-right:auto;">
  ...
  </div>